html.dark .body, html.dark body {
  background-color: #000000;
}
/* tell a friend form */
html.dark form:not(.form-style-4) .form-control {
  background-color: #f2f9ff;
  border-color: #b2b3b5;
}

.form-control:not(.form-control-sm):not(.form-control-lg) {
  font-size: 13.6px;
  font-size: 0.85rem;
  line-height: 1.25;
}
.form-label {
   margin-bottom: 0.1rem; 
}

img { max-width: 100%;}
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    }
    .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    }
    
    p {
        color: #e7e7e7;
        line-height: 20px;
        margin: 0 0 0px;
        font-size: 14px;
    }

 
    img {border-radius: 2px;}


    .product-default .product-title {
    font-size: 1.2em;
    color: #e7e7e7;
    font-family: Poppins,sans-serif;
    line-height: 1;
    padding: 10px 0 0 10px;
    text-transform: capitalize;
    text-decoration: none;
    }

    span.product-price, del.old-price, span.old-price{
        font-size: 0.8em;
        text-decoration: none;
 margin-left: 10px;
    }

    h1, h2, h3, h4, h5, h6 {padding:0px; margin:0px; text-transform: none;}

    .alert-primary {
      --bs-alert-color: #084298;
      --bs-alert-bg: #cfe2ff;
      --bs-alert-border-color: #b6d4fe;
  }

  .alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: 1pxsolidvar(--bs-alert-border-color);
    --bs-alert-border-radius: 0.375rem;
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
    background-color: #2a3038;

    
  }
    /*--------------------------------------------------------------
# Hero Section used in the home page header banner
--------------------------------------------------------------*/
#hero {
    width: 100%;
    height: 80vh;
    background: url("img/9991.jpg");
    background: url("img/9991.jpg") right center no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
  
  }
  
  #hero .container {
    padding-top: 72px;
  
  }
  
  #hero h1 {
    margin: 0 0 10px 0;
    font-size: 68px;
    font-weight: 700;
    line-height: 56px;
    color: #fff;
  }
  
  #hero h2 {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
    font-size: 30px;
  }
  
  #hero .btn-get-started {
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 28px 11px 28px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px 0 0 0;
    color: #fff;
    background: #47b2e4;
  }
  
  #hero .btn-get-started:hover {
    background: #209dd8;
  }
  
  #hero .btn-watch-video {
    font-size: 16px;
    display: flex;
    align-items: center;
    transition: 0.5s;
    margin: 10px 0 0 25px;
    color: #fff;
    line-height: 1;
    
  }
  
  #hero .btn-watch-video i {
    line-height: 0;
    color: #fff;
    font-size: 32px;
    transition: 0.3s;
    margin-right: 8px;
  
  }
  
  #hero .btn-watch-video:hover i {
    color: #47b2e4;
  }
  
  #hero .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
  }
/* mailchimp code */
  #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:100%;}
  /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
  We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */


  
  @media (max-width: 991px) {
    #hero {
      height: 100vh;
      text-align: center;
    }
  
    #hero .animated {
      -webkit-animation: none;
      animation: none;
    }
  
    #hero .hero-img {
      text-align: center;
    }
  
    #hero .hero-img img {
      width: 50%;
    }
  }
  
  @media (max-width: 768px) {
    #hero h1 {
      font-size: 28px;
      line-height: 36px;
    }
  
    #hero h2 {
      font-size: 18px;
      line-height: 24px;
      margin-bottom: 30px;
    }
  
    #hero .hero-img img {
      width: 70%;
    }
  }
  
  @media (max-width: 575px) {
    #hero .hero-img img {
      width: 80%;
    }
  
    #hero .btn-get-started {
      font-size: 16px;
      padding: 10px 24px 11px 24px;
    }
  }
  
  @-webkit-keyframes up-down {
    0% {
      transform: translateY(10px);
    }
  
    100% {
      transform: translateY(-10px);
    }
  }
  
  @keyframes up-down {
    0% {
      transform: translateY(10px);
    }
  
    100% {
      transform: translateY(-10px);
    }
  }
  
  /* Top Shows CSS */
  /* ====================== */

  h2, h3,h4, h5, h6 {
    line-height: normal; 
    text-transform: none;
    padding: 0px;
    margin: 0px;
  }
  
  /* Qamar code css */

  a:active {
    text-decoration: none;
    }
    a:hover {
    text-decoration: none;		
    }
    a:visited {
    text-decoration: none;
  }

    /* **************** */
    .content_img{
      position: relative;
      width: 100%;
      height: auto; 
      float: right;
    /*  margin-right: 10px; */
      margin-bottom: 10px;

    }

    /* Child Text Container */
    .content_img div{
      position: absolute;
      bottom: 0;
      right: 0;
      background: black;
      color: white;
      margin-bottom: -5px;
      font-family: sans-serif;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: visibility 0s, opacity 0.5s linear;  
      transition: visibility 0s, opacity 0.5s linear;
    }

    /* Hover on Parent Container */
    .content_img:hover{
      cursor: pointer;
    }    

    .content_img:hover div{
      width: 95%; 
      height: auto;
      padding: 0px;
      visibility: visible;
      opacity: 1.0; 
      top: 1px;text-1
      left: 5px;
      right: 0px;	
      bottom: 5px;
      border: 1px solid black; 
      border-radius: 2px;
    /*	margin-left: 6px; */
      text-align: left;
      padding: 10px;
      z-index: 99;
    }
    .prodrating { 
      display: inline; 
    }

    html.dark blockquote {
      border-color: #8daec9;
  }
    .blockquote-primary {color: #fff000;}
    .blockquote-secondary {color: #ff00ea;}
    .blockquote-tertiary {color: #00ffff8f;}


    .owl-carousel .owl-item img {
      display: block;
      width: auto; 
      display: inline-block;
  }
  .owl-carousel.nav-style-1 .owl-nav .owl-next, .owl-carousel.nav-style-1 .owl-nav .owl-prev {
    width: 20px;
    background: transparent !important;
    color: #e7e132;
}

		/*http://www.dynamicdrive.com/style/csslibrary/item/css_only_page_curl_effect/ */

    .curl{
      width: 60px; /* default width of page curl */
      height: 60px; /* default height of page curl */
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1000;
      overflow: hidden;
      background: #ffcc00;
      box-shadow: 0 0 10px gray;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
    }
    
    .curl .curlcontent{
      position: absolute;
      left: 15px; /* left position of curl content to show */
      top: 15px; /* top position of curl content to show */
    }
    
    .curl:after{ /* the curl itself */
      position: absolute;
      display: block;
      content: '';
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      transform: rotate(45deg) translateX(70%) scale(1.4);
      background: #afafaf;
      background: -moz-linear-gradient(left,  #afafaf 0%, #ffffff 29%);
      background: -webkit-linear-gradient(left,  #afafaf 0%,#ffffff 29%);
      background: linear-gradient(to right,  #afafaf 0%,#ffffff 29%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#ffffff',GradientType=1 );
    
    }
    
    .curl:hover{
      width: 100px; /* width of page curl when mouse over */
      height: 100px; /* height of page curl when mouse over */
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      box-shadow: 10px 10px 50px gray;
    }
    
    /* #### Right corner curl specific CSS (instead of default left corner) ### */
    
    .curl.rightcorner{
      left: auto;
      right: 0;
    }
    
    .curl.rightcorner:after{
      left: auto;
      right: 0;
      transform: rotate(135deg) translateX(70%) scale(1.4);  
    }
    
    .curl.rightcorner .curlcontent{
      left: auto;
      right: 0px; /* right position of curl content to show */
      top: 0px; /* top position of curl content to show */
    }
    
    .btn-circle.btn-xl {
      width: 50px;
      height: 50px;
      border-radius: 60px;
      font-size: 15px;
      text-align: center;
      vertical-align: baseline;
  }

  .ff-1 {
    font-size: 11px;  
    line-height: 1.2em; 
    text-align: justify;
    color: #e7e7e7;}

    .tags {
      background-color: #40408d; padding:0px; margin: 0px;
  }