body {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    padding: 0;
  }
 
  .logo
  {
      position:relative;
      width: 250px;
      left: 50px;
     top:10px;
 
  }
  
  .topnav1{
    overflow: hidden;
    background-color:#ebebeb;
  }
  .topnav1 .phoneemail{
    text-decoration:none;
    position:relative;
    left:80%;
    top:5px;
    font-size:15px; 
  }
  
  .topnav1 a {
    float: left;
    display: block;
    color: darkblue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

.emaildisplay
{
text-decoration:none;
position:absolute;
top:0px;
font-size:15px;
color:red;
}
  
  .topnav {
    overflow: hidden;
    background-color: #9BC472;
    
  }
  
  .topnav a {
      
    left: 120px;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  color:darkblue;
  padding: 20px 0px;
  margin: 0px 20px;
  display: inline-block;
  position: relative;

  }

  .topnav a::before {
    transition: 300ms;
    height: 2px;
    content: "";
    position: absolute;
    background-color:white;
  }
  .nav-link-ltr::before {
    width: 0%;
    bottom: 10px;
  }
  
  .nav-link-ltr:hover::before {
    width: 100%;
  }
 
.topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
   
      position: relative;
      top: -70px;
       left: 0px;
      display: block;
    }
   
  }
  
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
    
      float: none;
      display: block;
      text-align: left;
      position: relative;
      left: 0px;
    }
    .nav-link-ltr:hover::before {
        width: 30%;
      }
      .logo
      {
         position: relative;
         left: 50px;
         width: 250px;
      }
     
  }
 
  * {box-sizing: border-box;}

.mySlides {display: none;}


/* Slideshow container */
.slideshow-container {
   position:absolute;
   max-width: 1700px;
   margin-top: 0px;
   left: 0px;
 width:100%;
 overflow: hidden;
 
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration:1ms;
  animation-name: fade;
  animation-duration: 1ms;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
.slideimage
{
  width:100%;
  height:500px;
}
/* On smaller screens, decrease text size */
@media  screen and (max-width: 600px) {
  .text {font-size: 9px}
  .slideshow-container
  {
    margin-top:0px ;
  }
  .slideimage
{
  width:100%;
  height:300px;
}
}


.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
.cap-title
{
  position: absolute;
  top: 40%;
  font-size: 30px;
  font-weight: bold;
  left:20px;
  color: white;
  text-transform: uppercase;
  font-family: "Franklin Gothic";
}
.caps-title
{
position: absolute;
top: 40%;
font-size: 20px;
font-weight: bold;
left:20px;
color: white;
text-align: center;
color:crimson;
text-transform: uppercase;
font-family: "Britannic";
}
.caps-title2
{
position: absolute;
top: 40%;
font-size: 15px;
font-weight: bold;
left:20px;
color: white;
text-align: center;
color:goldenrod;
text-transform: uppercase;
font-family: "Castellar";
}
.caps-title .caps-title1
{
  font-size: 25px;
  font-weight: bold;
  font-family: "Britannic";
  text-transform: uppercase;
}
@keyframes bounceInDown{
0%, 60%, 75%, 90%, 100% {
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0);
}
60% {
  opacity: 1;
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0);
}
75% {
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}
90% {
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
}
100% {
  -webkit-transform: none;
  transform: none;
}
}
/*first section*/
#hero .container1 {
  padding-top: 40%;
}
#hero {
  width: 100%;
 
}
* {
  box-sizing: border-box;
}

.column {
  float: left;
 align-items: center;
  width: 19.33%;
  
  padding: 5px;
}



/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
.content {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
 
  
}
.content .content-overlay {

  background: rgba(0,0,0,0.7);
  position: relative;
  height: 99%;
  width: 100%;
  left: 0;
  top:0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;

}

.content:hover .content-overlay{
  opacity: 1;
}
.content-details {
 
  position: absolute;
  text-align: center;
  padding-left: 5PX;
  padding-right: 5PX;
  width: 85%;
  top: 50%;
  left: 30%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color:red;
  font-weight: bold;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color:darkblue;

  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 80%;
}

.fadeIn-top{
  top: 20%;
}

.fadeIn-left{
  left: 20%;
}

.fadeIn-right{
  left: 80%;
}

/* Clearfix (clear floats) */


.content-image
{
  
  width: 200px;
  height: 200px;
}

@media (max-width: 1200px) {
  #hero .container1 {

    padding-top: 50%;
   }
   .content-image
{
  width: 200px;
}
}

@media (max-width: 900px) {
  #hero .container1 {

    padding-top: 80%;
   }
   .content-image
{
  width: 200px;
}
}


@media  screen and (max-width: 600px) {
  #hero .container1 {

    padding-top: 93%;
   }
  .cap-title
{
  position: absolute;
  top: 40%;
  font-size: 18px;
  font-weight: bold;
  left:20px;
  color: white;
  text-transform: uppercase;
  font-family: "Franklin Gothic";
}
.caps-title
{
position: absolute;
top: 40%;
font-size: 13px;
font-weight: bold;
left:20px;
color: white;
text-align: center;
color:crimson;
text-transform: uppercase;
font-family: "Britannic";
}
.caps-title2
{
position: absolute;
top: 40%;
font-size: 10px;
font-weight: bold;
left:20px;
color: white;
text-align: center;
color:goldenrod;
text-transform: uppercase;
font-family: "Britannic";
}
.caps-title .caps-title1
{
  font-size:15px;
  font-weight: bold;
  font-family: "Britannic";
  text-transform: uppercase;
}
  .column
  {
    width: 100%;
  }
  .content-image
{
  width: 300px;
}

}

/*about section*/
#about .container1 {
  padding-top: 10%;
}
#about {
  width: 100%;
  
}
.topnavabout{
  overflow: hidden;
  background:linear-gradient(1525deg,#1f2833,#45a29e);
}
#about .column {
  float: left;
  padding:3px;
  width: 50%;
}



/* Clearfix (clear floats) */
#about .row::after {
 
  content: "";
  clear: both;
  display: table;
}
.imgabout
{
  width: 80%;
  height: 150px;
  padding-left: 30px;
}
#about .aboutdetails
{
  color: white;
  

}

  @media(max-width:1200px)
  {
    #about .container1 {
      padding-top: 10%;
    }
  }
@media (max-width: 900px) {
  #about .container1 {
    padding-top: 10%;
  }
}
@media (max-width: 600px) {
  #about .container1 {
    padding-top: 30%;
  }
  #about .column {
  
    width: 100%;
  }
  

}
/*policy section*/
#policy .container1 {
  padding-top: 5%;
}
#policy {
  width: 100%;
  
}
.flex
{
  display: flex;
}
.flex div
{
  flex: 1;
  margin: 20px;

}
.pimage
{
  width: 50%;
}
.policyname
{
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  width: 180px;
  
}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background: linear-gradient(to bottom right,#DF6589FF,#3C1053FF);
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
}

/* The Close Button */
.close,.close1,.close2,.close3,.close4,.close5 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover ,.close1:hover,.close2:hover,.close3:hover,.close4:hover,.close5:hover,
.close:focus  ,.close1:focus,.close2:focus,.close3:focus,.close4:focus,.close5:focus{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
.Shipheading
{
  z-index: 5;
text-align: center;
font-size:40px;
letter-spacing: 2px;
color: black;
line-height: 50px;
font-family: "yesteryear", cursive;
background-image: linear-gradient(33deg,yellow 25%,red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
        background-clip: text;

 
}
.Shippingsheading
{
  font-family: "Roboto", sans-serif;
 font-size:20px;
 color:yellow;
}
.shippingcontent
{
  font-family: "Roboto", sans-serif;
 font-size:15px;
 color: white;
}
.Shippingsheading1
{
  color: yellow;
  font-family: "Roboto", sans-serif;
 font-size:17px;
}

@media (max-width: 600px) {

  .flex
  {
    display:block;
    padding-left: 30%;
   
  }
  .flex div
  {
    align-items: center;
  
  }
  .pimage
  {
    align-items: center;
  }
 .policyname
 {
 font-size:8px;
 }
.modal-content {
 
  padding: 10px;
  
  width: 90%;
}
.Shipheading
{

font-size:20px;
padding-left: 0px;

 
}
}
@media (max-width: 900px) {

  .flex
  {
    display:block;
    padding-left: 30%;
   
  }
  .flex div
  {
    align-items: center;
  
  }
  .pimage
  {
    align-items: center;
    
  }
 .policyname
 {
  width: 100%;
font-size: 12px;
 }
.modal-content {
 
  padding: 10px;
  
  width: 90%;
}
.Shipheading
{

font-size:30px;
padding-left: 0px;

 
}
.shippingcontent
{
 
 font-size:25px;
 
}
.Shippingsheading1
{
  color: yellow;
  font-family: "Roboto", sans-serif;
 font-size:27px;
}

}

/*----- 3.15 Footer top Area -----*/
.footer-top-area {
  background:#d7c49eff none repeat scroll 0 0;
  padding: 50px 0 60px;
}
.footer-about {
  margin-bottom: 10px;
  text-align: center;
}
.single-contact {
  margin-bottom: 10px;
}
.single-contact:last-child {
  margin-bottom: 0;
}
.single-contact .icon {
  float: left;
 margin-left: 100px;
}
.single-contact .icon i {
  border: 1px solid #343148ff;
  border-radius: 50%;
  color: #343148ff;
  font-size: 20px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  width: 40px;
margin-left:10px;
}
.single-contact .details {
  overflow: hidden;
}
.single-contact .details p {
  margin-left:10px;
  color: #343148ff;
  font-size: 25px;
  font-weight: 400;
}
.single-contact .details a {
  color: #343148ff;
  font-size: 18px;
  text-decoration: none;
}
.single-contact .details a:hover {
  color: #343148ff;
}
.footer-links > h2 {
  color: #343148ff;
  float: left;
  padding-left: 30px;
  padding-top: 60px;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  align-items: center;}

.footer-links ul {
  list-style:none
}
.footer-links ul li {
  margin-bottom: 15px;
  width: 100%;
 text-align: center;
}
.footer-links.footer-account ul li {
    align-items: center;
  margin-bottom: 20px;
  width: 100%;
  float: left;
  margin-left: -50px;
}
.footer-links ul li:nth-child(2n+1) {
  clear: both;
}
.footer-links.footer-quick-link ul li a {
  text-align: center;
  border-bottom: 1px solid #343148ff;
  width: 150px;
}
.footer-links ul li a {

  text-align: center;
  display:inline-block;
  color: #343148ff;
  display: block;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding-bottom: 15px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 80%;
}
.footer-links ul li a:hover {
  color: #343148ff;
}
.column1 {
  float: left;
 align-items: center;
  width: 30.33%;
   padding: 5px;
}
.footer-heading
{
margin-top: 0px;
}
@media  screen and (max-width: 600px) {
    
 .footer-links.footer-account ul li {
 text-align:left;
  margin-bottom: 20px;
  width: 100%;
  float: left;
  margin-left: 80px;
}
.footer-links ul li a {
    
 text-align:left;

}
.footer-links > h2 {
  color: #343148ff;
  float: left;
  margin-left:50px;
  padding-left: 30px;
  padding-top: 60px;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  align-items: center;}

.footer-links.footer-quick-link ul li a {
  text-align: center;
  margin-left:70px;
  border-bottom: 1px solid #343148ff;
  width: 150px;
}
    
}

/* Clearfix (clear floats) */
.row1::after {
  content: "";
  clear: both;
  display: table;
}
@media (max-width: 600px) {
.column1
{
  width: 100%;
}
}
.columncontact
{
  float: left;
  align-items: center;
   width: 50%;
}
.columncontact ul
{
list-style: none;
}
.columncontact li
{
  color:darkblue;
  font-size: 20px;
}
.columncontact p
{
  color:darkblue;
  font-size: 20px;
  font-weight:400px;
}
.columncontact a
{
  text-decoration: none;
  color: darkblue;
  font-size: 20px;
}
.columncontact li:hover
{
  color: crimson;
}
.columncontact a:hover
{
  color: crimson;
}
.columncontact p:hover
{
  color: crimson;
}
.columncontact h2
{
  text-decoration: underline;
}
.imgcontact
{
  align-items: center;
}
/*contact*/
.get-in-touch {
  max-width: 800px;
  margin: 50px auto;
  position: relative;

}
.get-in-touch .title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size:20px;
  line-height: 48px;
  padding-bottom: 30px;
     color: #5543ca;
    background: #5543ca;
    background: -moz-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
    background: -webkit-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
    background: linear-gradient(to right,#f4524d  0%,#5543ca  100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.contact-form .form-field {
  position: relative;
  margin: 32px 0;
}
.contact-form .input-text {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 2px 0;
  border-color: #5543ca;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
.contact-form .input-text:focus {
  outline: none;
}
.contact-form .input-text:focus + .label,
.contact-form .input-text.not-empty + .label {
  -webkit-transform: translateY(-24px);
          transform: translateY(-24px);
}
.contact-form .label {
  position: absolute;
  left: 20px;
  bottom: 11px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #5543ca;
  cursor: text;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, 
  -webkit-transform .2s ease-in-out;
}
.contact-form .submit-btn {
  display: inline-block;
  background-color: #000;
   background-image: linear-gradient(125deg,#a72879,#064497);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  width:200px;
  cursor: pointer;
}

.columnabout
{
    float: left;
   padding-right: 10px;
   align-items: center;
    width: 50%;
     padding: 10px;
    
 
}
.aboutslideimage
{
  width: 300px;
  text-align: center;
}
.rowabout::after {
  content: "";
  clear: both;
  display: table;
}

.aboutusdetails 
{

  font-size: 20px;
  font-weight: bold;
  font-family: "Microsoft Sans Serif";
  color:teal;
  width: 100%;
}
.purchaseplan
{
  color: crimson;
  font-size: 30px;
  text-align: center;
  font-family: "Arial";
}
.hswarnanidhi
{
  text-decoration: underline;
  color: crimson;
  font-size: 25px;
  text-align: center;
  font-family: "Arial";
  
}
.sub1
{
  color: crimson;
  font-size: 20px;
 margin-left: 10px;
  font-family: "Cambria";
  font-weight: bold;
}
.sub2
 {
  color: crimson;
  font-size: 20px;
  font-family: "Cambria";
  font-weight: bold;
 }
 .tsub
 {
  color: crimson;
  font-size: 18px;
  font-family: "Cambria";
  font-weight: bold;
 }
 #attingal
 {
  display: none;
 
   
  }
  .attingal1
  {
    display: inline-block;
  }
  @media (max-width: 600px) {
    .columnabout
    {
      width: 100%;
    }
    .columncontact
    {
      width: 100%;
    }
    .sub2
 {
  color: crimson;
  font-size: 10px;
  font-family: "Cambria";
  font-weight: bold;
 }
 .sub1
{
  color: crimson;
  font-size: 20px;
 margin-left: 10px;
  font-family: "Cambria";
  font-weight: bold;
}
.tsub
 {
  color: crimson;
  font-size: 20px;
  font-family: "Cambria";
  font-weight: bold;
 }
    }

.table1
{
border-collapse: collapse;
border-color: crimson;
width: 80%;
height: 100%;
text-align: center;
font-family: arial;
font-weight: bold;

}

/* product*/

.main{box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; margin-top: 10px;}
h3{ color: #f7f7f7; padding: 15px; border-radius: 4px; box-shadow: 0 1px 6px rgba(57,73,76,0.35);}
.img-box{margin-top: 20px;}
.img-block{position:relative;float: left;top:0px;}
p{margin-top: 0;text-align:center;}
#img1{width: 200px; height: 200px; margin-bottom: 10px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; border:6px solid #f7f7f7;}
.aboutheading h2
{
 text-align: center;
 font-style: "italic!important";
 font-size: 30px;
}

.products
{
  position: relative;
  left: 50px;
}
.box {
  overflow: hidden;
  background-color:#37517e;
  
}

.content-imagep
{
  
  width:50%;
  height: 0%;
}
.fvalues
{
margin-left:10px;
}
@import url(https://fonts.googleapis.com/css?family=Courgette);
@import url(https://fonts.googleapis.com/css?family=Amaranth);
@import url(https://fonts.googleapis.com/css?family=Muli);
@import url("https://fonts.googleapis.com/css?family=Cookie");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* set body dimension and background */


/* words*/
.abouth1{
  color:orangered;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  font-family: Courgette;
}
.words {
  font-family: Muli;
}
.words > .abouth2 {
  color:#a72879;
  line-height: 40px;
  font-size: 20px;
  font-family:Microsoft Sans Serif;
}
.words > ul {
  color: grey;
}
.words > li {
  color: grey;
  line-height: 30px;
}
.imageabout
{
    width: 300px;
    margin-left: 25%;
}
@media screen and (max-width: 600px) {
    .words > .abouth2 {
  color: darkblue;
  line-height: 40px;
  font-size: 15px;
}
.imageabout
{
    width: 100px;
    margin-left: 25%;
}
}
.btnlogin
{
    position:absolute;
  
    right:30px;
    color:white;
}
.btnlogin i
{
    font-size:20px;
    color:#fee715ff;
}

@media screen and (max-width: 600px) {
    .btnlogin i
{
    font-size:15px;
    color:#fee715ff;
}
 .btnlogin
{
    position:absolute;
    top:120px;
    right:0px;
    color:white;
}
}