@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bellefair&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap');
*
{
  padding:0;
  margin:0;
  box-sizing: border-box;
}

/* Start Header------------------------------------------------------------------------- */
header
{
  background:linear-gradient(45deg,#4000FF,#FF0080);
  width:100%;
  height:100vh;
}
.container
{
  max-width:1400px;
  padding-left:25px;
  padding-right:25px;
  margin:0 auto;
}
nav
{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}
nav .logo
{
  cursor:pointer;
}
nav .logo img
{
  width:100%;
}

nav ul
{
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  align-items:center;
  list-style:none;
}

nav ul li
{
  margin:0 25px;
  transition:.5s;
}

nav ul li:hover
{
  transform:translateY(-5px);
  transition:.5s;
}

nav ul li .fa
{
  font-size:20px
}
nav ul li a
{
  position:relative;
  text-decoration:none;
  color:#fff;
  font-family: 'Roboto', sans-serif;
  font-weight:500;
  transition:.5s;
}

 /* Start Header After---------------------------------------------------------------- */

nav ul li a::after
{
  position:absolute;
  content:"";
  left:0;
  top:0;
  width:0;
  height:100%;
  border-bottom:2px solid #fff;
  transform:translateX(0);
  opacity:0;
  transition:.5s;

}
nav ul li a:hover:after
{
  transform:translateX(1);
  opacity:1;
  width:100%;
}

/* End Header After */

.row
{
  display:flex;
  justify-content:space-around;
  align-items:center;
  margin:0 20px;
  flex-wrap:wrap;
}
.col-2
{
  flex-basis:50%;
  min-width:300px;
}
.col-2 h1
{
  font-size:1.9rem;
  line-height:1.5;
  font-family: 'Montserrat', sans-serif;
  color:#fff;
  margin-bottom:10px;
}
.col-2 p
{
  color:#fff;
  font-family: 'Old Standard TT', serif;
  font-weight:400;
  line-height:2;
  margin-bottom: 10px;
}
.col-2 .btn
{
  display:inline-block;
  text-decoration:none;
  margin-top:15px 0;
  background:linear-gradient(to right,#0000FF,#FF0080);
  width:28% !important;
  color:#fff;
  padding:10px 10px;
  border-radius:30px;
  text-align:center;
  font-weight:bold;
}
.col-2 img
{
  width:100%;
  padding:15px 0;
}
nav .bars
{
  font-size:1.7rem;
  display:none;
}
nav .bars li
{
  list-style:none;
}
nav .bars li a
{
  color:#fff;
}
/* Start Media Header------------------------------------------------------------------- */
@media screen and (min-width:1023px)
{
  .categories .categories_title::after{
    width:12%;
  }
}

@media screen and (max-width:1022px)
{
  nav ul{
    margin:20px 40px;
    }
  .col-2 h1{
    font-size:1.5rem;
    margin-top:20px;
  }
  .col-2 .btn{
    display:inline-block;
    margin:10px auto;
    width: 30%;
  }
  .logo img{
    display:block;
  }
}

@media screen and (max-width:639px)
{
  nav ul {
    margin:20px 0;
    justify-content:space-around;
  }
  header .col-2{
    flex-basis:80%;
    margin:0 auto;
  }
  header .col-2 h1{
    font-size:1.2rem;
    margin-top:20px;
  }
  header .col-2 .btn{
    display:block;
    margin:10px auto;
    width:30%;
  }
  header .col-2 img{
    width:70%;
    display:block;
    margin:0 auto;
    padding:0;
  }
}

@media screen and (max-width:602px)
{
  nav ul{
    position: absolute;
    top: 70px;
    right: 0;
    background:linear-gradient(45deg,#0000FF,#FF00BF);
    width: 100%;
    display: block;
    text-align: center;
    height: 50%;
    overflow:hidden;
    transition:max-height .5s;
  }

  nav ul li{
    margin:20px 0;
  }
  nav .bars{
    display:block;
  }
  .logo img{
    display:block;
  }
  header .col-2 h1{
    line-height:1.5;
    font-size:1.5rem;
  }
  header .col-2 p{
    line-height:1.5;
  }
  header .col-2 .btn{
    display:block;
    margin:10px auto;
    width: 40% !important;
  }
  header .col-2 img{
    width:60%;
  }
}
@media screen and (max-width:380px)
{
  header .col-2 .btn{
    width:50% !important;
  }
}
/* End Header */

/* Start Categories ---------------------------------------------------------------*/

.categories_title
{
  margin:40px 0;
  color:#333;
  text-align:center;
  position:relative;
}
.categories_title::after
{
  position:absolute;
  content:"";
  width:15%;
  height:5px;
  background:linear-gradient(45deg,#4000FF,#FF00BF);
  bottom:-10px;
  left:50%;
  transform:translate(-50%);
}
.categories .col-3
{
  flex-basis:30%;
  min-width:150px;
  padding:20px 10px;
}
.categories .col-3 img
{
  width:100%;
  transition:.5s;
  filter:grayscale(100%);
}
.categories .col-3 img:hover
{
  transform:translateY(-10px);
  filter:grayscale(0);
}
.categories .col-3 p
{
  text-align:center;
  color:#555;
  font-family: 'Montserrat', sans-serif;
  font-size:1.1rem;
}
/* Start Media Categories------------------------------------------------------------------- */

@media screen and (max-width:639px)
{
  .categories .col-3{
    flex-basis:100%;
    margin-bottom:10px;
  }
  .categories_title::after{
    width:25%;
  }
}
@media screen and (max-width:602px)
{
  .categories .col-3{
    flex-basis:100%;
    margin-bottom:10px;
  }
  .categories_title::after{
    width:25%;
  }
}
@media screen and (max-width:380px)
{
  .categories_title::after{
    width:43%;
  }
}
/* End Categories */

/* Start Features------------------------------------------------------------------------ */

.features
{
  margin:0 auto;
}
.feature_title
{
  font-family: 'Arapey', serif;
  text-align:center;
  margin:40px 0;
  position:relative;
}
.feature_title::after
{
  position:absolute;
  content:"";
  width:10%;
  height:5px;
  background:linear-gradient(45deg,#4000FF,#FF00BF);
  bottom:-10px;
  left:50%;
  transform:translate(-50%);
}
.small_container
{
  max-width:1080px;
  text-align:center;
  margin:auto;
}
.col-4 
{
  flex-basis:25%;
  min-width:150px;
  padding:20px;
  position:relative;
  text-align:center;
}
.col-4 img
{
  width:100%;
  transition:transform .5s;
}
.col-4 img:hover
{
  transform:translateY(-10px);
}
.col-4 .feature_h4
{
  color:#555;
}
.col-4 p
{
  color:#555;
}
.col-4 .feature_rating .fa
{
  color:#ff523b;
}

/* Strat Media Features ----------------------------------------------------------------*/

@media screen and (min-width:1023px)
{
  .small_container{
    max-width:1400px;
  }
}
@media screen and (max-width:1022px)
{
  .features .col-4
  {
    flex-basis:25%;
    text-align:center;
  }

}
@media screen and (max-width:639px)
{
  .features .col-4{
    flex-basis:100%;
    text-align:center;
  }

}

@media screen and (max-width:602px)
{
  .features .col-4{
    flex-basis:100%;
    text-align:center;
  }
  .features .col-4 h4 , p{
    font-size:1.1rem;
  }

}
/* End Features */

/* Strat Offer ---------------------------------------------------------------------------*/

.offer
{
  text-align:center;
}
.offer_title
{
  position:relative;
  text-align:center;
  margin:30px 0;
}
.offer_title::after
{
  position:absolute;
  content:"";
  width:15%;
  height:5px;
  background:linear-gradient(45deg,#4000FF,#FF00BF);
  bottom:-10px;
  left:50%;
  transform:translate(-50%);
}
.offer_cont
{
  background:linear-gradient(45deg,#4000FF,#FF0080);
}
.offer_cont small
{
  color:#fff;
}
.col-2 img
{
  width:100%;
}
.col-2 .offer_p
{
  color:#fff;
  font-family: 'Bellefair', serif;
}
.col-2 .offer_h1
{
  color:#fff;
}
small
{
  color:#fff;
}
.btn_1
{
  display:block;
  text-decoration:none;
  margin:20px auto;
  background:linear-gradient(to right,#0000FF,#FF0080);
  width:28%;
  color:#fff;
  padding:10px 10px;
  border-radius:30px;
  text-align:center;
  font-weight:bold;
}
/* Strat Media Offers --------------------------------------------------------------------*/

@media screen and (max-width:639px)
{
  .btn_1{
    width:40%;
  }
}
@media screen and (max-width:602px)
{
  .btn_1{
    width:40%;
  }
}
@media screen and (max-width:380px)
{
  .offer_title::after {
    width:40%;
  }
}
/* End Offer */

/* Start  Testimonials -------------------------------------------------------------------*/

.testimonial_title
{
  position:relative;
  text-align:center;
  margin:30px 0;
}
.testimonial_title::after
{
  position:absolute;
  content:"";
  width:16%;
  height:5px;
  background:linear-gradient(45deg,#4000FF,#FF00BF);
  bottom:-10px;
  left:50%;
  transform:translate(-50%);
}
.testimonial .col-3
{
  flex-basis:30%;
  min-width:50px;
  padding:40px 10px;
  text-align:center;
  background:#fff;
  margin-top:30px;
  box-shadow:0 0 20px 0px rgba(0,0,0,.1);
  transition:transform .5s;
}
.testimonial .col-3:hover
{
  transform:translateY(-10px);
}
.testimonial .col-3 p
{
  width:200px;
  margin:10px auto;
  font-family: 'Hepta Slab', serif;
  justify-content:center;
}
.col-3 .fa-quote-left
{
  color:#ff523b;
}
.testimonial_rating
{
  color:#ff523b;
}
.testimonial .col-3 img
{
  width:50px;
  border-radius:50%;
  margin:10px 0;
}
/* Start Media Testimonial ------------------------------------------------------------*/

@media screen and (max-width:639px)
{
  .testimonial .col-3{
    flex-basis:30%;
  }
  .testimonial .col-3 p{
    width:150px;
  }
  .testimonial_title::after{
    width:26%;
  }
}
@media screen and (max-width:602px)
{
  .testimonial .col-3{
    flex-basis:70%;
  }
  .offer_title::after{
    width:26%;
  }
}
@media screen and (max-width:380px)
{
  .testimonial_title::after {
    width:45%;
  }
}
/* End  Testimonials */

/* Start Brand -----------------------------------------------------------------------*/

.brand
{
  margin:40px 0;
  text-align:center;
}

.brand .col-4-1 .brand_img img
{
  width:50%;
}
/* Strat Media Brand -------------------------------------------------------------------*/

@media screen and (max-width:639px)
{
  .brand .col-4-1{
    flex-basis:50%;
  }
  .offer_title::after{
    width:25%;
  }
}
@media screen and (max-width:602px)
{
  .col-4-1{
    flex-basis:50%;
  }
  .testimonial_title::after{
    width:30%;
  }
}
/* End  Brand */

/* Start Footer -------------------------------------------------------------------------*/

.footer
{
  background:#000;
  padding:40px 0 50px;
  color:#8a8a8a;
  font-family: 'Montserrat', sans-serif;
  font-size:14px;
  text-align:center;
}
.footer-col-1,.footer-col-3
{
  flex-basis:30%;
}
.footer-col-1 img
{
  cursor:pointer;
} 
.footer-col-2
{
  flex-basis:40%;
}
.footer h3
{
  color:#fff;
  margin:10px 0;
}
.footer-col-1 p
{
  margin-bottom:10px;
}
.footer-col-1 img
{
  width:80%;
}
.footer-col-2 p
{
  line-height:2;
}

.footer-col-3 ul li
{
  list-style:none;
  cursor:pointer;
  text-align:left;
  display:block;
  margin:10px 90px;
  transition:.5s;
}
.footer-col-3 ul li .fa
{
  transition:.5s;
}
.footer-col-3 ul li .fa:hover
{
  color:#fff;
}

/* Start Media Footer ----------------------------------------------------------------*/

@media screen and (min-width:1022px)
{
  .footer
  {
    text-align:center;
  }
  .footer-col-2{
    flex-basis:30%;
    text-align:center;
  }
  .footer-col-1,.footer-col-3{
    flex-basis:30%;
    text-align:center;
  }
  .footer-col-3 ul li{
    margin: 10px 141px;
    text-align:left;
    display:block;
    width:40%;
  }
  .footer-col-3 ul li .fa{
    display:inline-block !important;
  }
}
@media screen and (max-width:639px)
{
  .footer-col-2{
    flex-basis:100%;
  }
  .footer-col-1,.footer-col-3{
    flex-basis:100%;
  }
  .footer-col-1 img 
  {
    width:50%;
  }
  .footer-col-3 ul li{
    margin:10px auto;
    text-align:left;
    display:block;
    width:18%;
  }
  .footer-col-3 ul li .fa{
    display:inline-block !important;
  }
}
@media screen and (max-width:602px)
{
  .footer-col-2{
    flex-basis:100%;
  }
  .footer-col-1,.footer-col-3{
    flex-basis:100%;
  }
  .footer-col-1 img 
  {
    width:50%;
  }
  .footer-col-3 ul li{
    margin:10px auto;
    text-align:left;
    display:block;
    width:18%;
  }
  .footer-col-3 ul li .fa{
    display:inline-block !important;
  }
}

@media screen and (max-width:380px)
{
  .footer-col-2{
    flex-basis:100%;
  }
  .footer-col-1,.footer-col-3{
    flex-basis:100%;
  }
  .footer-col-3 ul li{
    margin:10px auto;
    text-align:left;
    display:block;
    width:35%;
  }
  .footer-col-3 ul li .fa{
    display:inline-block !important;
  }
}

/* End Footer */

/* Start CopyRight --------------------------------------------------------------------*/

hr
{
  margin:5px 0;
  color:#8a8a8a;
}
.copyright p
{
  margin:5px 0;
  transition:.5s;
}
.copyright p:hover
{
  color:#fff;
  cursor:pointer;
}
/* End CopyRight */

/* ==============================================================================================*/

/* Start Header Product ----------------------------------------------------------------*/

.header-product
{
  width:100%;
  height:16vh;
  background:linear-gradient(45deg,#4000FF,#FF0080);
  text-align:center;
}
.nav-product
{
  text-align:center;
}

/* Strat Media Header Product ---------------------------------------------------------------------*/

@media screen and (max-width:1022px)
{
  .features .col-4
  {
    flex-basis:25%;
    text-align:center;
  }
}

@media screen and (max-width:639px)
{
  .features .col-4{
    flex-basis:100%;
    text-align:center;
  }
  .nav-products{
    padding: 28px 0;
  }

  .nav-products .logo{
    margin-top: -28px;
  }

  .nav-product .links{
    margin: 15px auto;
  }

  .nav-products .bars{
    margin-top: -28px;
  }
}

@media screen and (max-width:602px)
{
  .nav-product .ul-product{
    position: absolute;
    top: 71px;
    right: 0;
    background:linear-gradient(45deg,#0000FF,#FF00BF);
    width: 100%;
    display: block;
    text-align: center;
    height: 50%;
    overflow:hidden;
    transition:max-height .5s;
    z-index:1;
  }
    .nav-product .links .fa-products{
    margin-right: -330px;
  }
}
/* End Header Products */

/* Start Products ------------------------------------------------------------------------*/
.row-2
{
  justify-content:space-between;
  margin:100px 115px 50px;
  
}
.row-2 h2
{
  border:1px solid  #ff523b;
  padding:5px;
}
select
{
  border:1px solid #ff523b;
  padding:10px;
  outline:none;
}
.product-pagenat
{
  margin:20px 0;
  text-align:center;
}
.product-pagenat span
{
  margin-right:15px;
  border:1px solid #FF8000;
  display:inline-block;
  width:40px;
  height:40px;
  line-height:40px;
  cursor:pointer;
  
}
.product-pagenat .active
{
  background:linear-gradient(to right,#0040FF,#00FFFF);
}
.product-pagenat span:hover
{
  background:linear-gradient(to right,#0040FF,#00FFFF);
  color:#fff;
}
/* Strat Media  Product --------------------------------------------------------------------------------------------*/

@media screen and (max-width:1022px)
{
  .feature_title::after{
    width:12%;
  }
}
@media screen and (max-width:639px)
{
  .feature_title::after{
    width:20%;
  }
}
@media screen and (max-width:602px)
{
  .feature_title::after{
    width:20%;
  }
}
@media screen and (max-width:380px)
{
  .nav-product .links .fa-products{
    margin-right: -100px;
  }
  .row-2{
    display:none;
  }
  .feature_title::after{
    width:30%;
  }
}

/* End Products */

/* ===============================================================================================*/

/* Start About ----------------------------------------------------------------------*/
.about .col-2 .title h1
{
  text-align:center;
  margin:40px auto;
  color:#fff;
  font-family: 'Raleway', sans-serif;
  font-size:3rem;
}

.about .col-2 .title p
{
  text-align:center;
  margin:40px auto;
  color:#fff;
  font-family: 'Raleway', sans-serif;
  font-size:1.5rem;
  width:405px;
}

/* Start About Media ----------------------------------------------------------------------*/
@media screen and (max-width:639px)
{
  .about .col-2 .title h1{
    font-size:1.5rem;
    margin:10px auto 5px;
  }
  .about .col-2 .title p{
    font-size:1.2rem;
    width:250px;
    margin:10px auto 5px;
  }
}
@media screen and (max-width:602px)
{
  .about .col-2 .title h1{
    font-size:1.5rem;
    margin:10px auto 5px;
  }
  .about .col-2 .title p{
    font-size:1.2rem;
    width:250px;
    margin:10px auto 5px;
  }
}
@media screen and (max-width:380px)
{
  .about .col-2 .title h1{
    font-size:1.5rem;
  }

  .about .col-2 .title p{
    font-size:1.2rem;
    width:250px;
  }
}
/* End About */

/* Strat Product-Details -----------------------------------------------------------------------------*/
.product
{
  text-align:center;
  margin:20px auto 40px;
}
.product-title
{
  position:relative;
  text-align:center;
  margin:30px 0;
}
.product-title h1::after
{
  position:absolute;
  content:"";
  width:10%;
  height:5px;
  bottom:-10px;
  left:50%;
  transform:translate(-50%);
  background:linear-gradient(45deg,#4000FF,#FF00BF);
}
.col-2-gallery h1
{
  color:#000;
}
.col-2-gallery
{
  flex-basis:30%;
  min-width:250px;
}
.product .img-gallary img
{
  width:100%;
}
.product .content-size span
{
  display:inline-block;
  width:50px;
  height:50px;
  border-radius:50%;
  line-height:50px;
  border:2px solid #333;
  margin:0 10px;
  transition:translateY .5s;
}
.product .content-size span:hover
{
  border:2px solid #FF8000;
  transform:translateY(-5px);
  cursor:pointer;
}
.content-size
{
  margin:20px 0;
}
.content-input
{
  border:1px solid #ff523b;
  padding:10px;
  outline:none;
}
.content-title h1
{
  text-align:left;
  margin-left:38px;
}
.content-title p
{
  color:#000;
  font-size:1.5rem;
  text-align:left;
  margin-left:38px;
}
.content-title .btn
{
  margin-left:10px;
}
.content-title h3
{
  text-align:left;
  margin-left:38px;
  margin-top:20px;
}
.content-title p
{
  line-height:1.3;
  font-size:1.3rem;
  margin-top:20px;
}
.small-img-row
{
  display:flex;
  justify-content:space-around;
}
.small-img-col
{
  flex-basis:25%;
  cursor:pointer;
}
.small-img-col img
{
  transition:.5s;
}
.small-img-col img:hover
{
  transform:translateY(-5px);
}
/* Start Product-Details Media ----------------------------------------------------------------------*/

@media screen and (min-width:1023px)
{
  .product-title h1::after{
    width:16%;
  }
  .content-title h1{
    text-align:center;
    margin-left:0px;
  }
  .content-title h2{
    font-size:1.4rem;
  }
  .product .content-size span{
    width:40px; 
    height:40px;
    line-height:40px;
    margin:0 5px;
  }
  .content-input{
    width:140px;
  }
  .content-title .btn{
    width:40% !important;
    margin:10px 0;
  }
}

@media screen and (max-width:1022px)
{
  .product-title h1::after{
    width:12%;
  }
  .content-title h1{
    text-align: center;
    margin-left:0px;
  }
  .content-title h2{
    text-align: center;
    font-size:1.4rem;
  }
  .product .content-size span{
    display:inline-block;
    width:35px;
    height:35px;
    line-height:35px;
    margin:0 5px;
  }
  .content-title .btn{
    width:40% !important;
  }
  .col-2{
    text-align:center;
    padding:0;
    margin:0;
  }
}
@media screen and (max-width:639px)
{
  nav .logo img{
    width:90%;
  }
  .nav-product .ul-product{
    top:64px;
  }
  .nav-product .links .fa-products {
    margin-right:-340px;
  }
  .product-title h1::after{
    width:20%;
  }
  .content-title h1{
    text-align:center;
    margin-left:0px;
  }
  .content-title p{
    font-size:1.1rem;
    text-align:center;
    margin-left:0px;
  }
  .content-title h3{
    text-align:center;
  }
  .col-2{
    flex-basis:100%;
  }

  .col-4{
    flex-basis:100%;
  }
}
@media screen and (max-width:602px)
{
  nav .logo img{
    width:90%;
  }
  .nav-product .ul-product{
    top:64px;
  }
  .nav-product .links .fa-products {
    margin-right:-340px;
  }
  .product-title h1::after{
    width:20%;
  }
  .content-title h1{
    text-align:center;
    margin-left:0px;
  }
  .content-title p{
    font-size:1.1rem;
    text-align:center;
    margin-left:0px;
  }
  .content-title h3{
    text-align:center;
  }
  .col-2{
    flex-basis:100%;
  }

  .col-4{
    flex-basis:100%;
  }
}
@media screen and (max-width:380px)
{
  .nav-product .links .fa-products {
    margin-right:-100px;
  }
  .product{
    margin:0;
  }
  .product-row{
    margin:0;
  }
  .product-title h1::after{
    width:30%;
  }
  .content-title h1{
    text-align:center;
    margin-left:0px;
  }
  .content-title p{
    font-size:1.1rem;
    text-align:center;
    margin-left:0px;
  }
  .product .content-size span{
    margin:0;
    width:40px;
    height:40px;
    line-height:40px;
  }
  .content-title .btn{
    margin-left:0px;
    width: 50%;
    display: inline-block;
  }
  .content-title h3{
    text-align:center;
    margin-left:0px;
    margin-top:20px;
  }
  .col-4{
    flex-basis:100%;
  }
  .nav-product .ul-product{
    top:64px;
  }
}
/* End Product-Details */

/*Start Account Page--------------------------------------------------------------------------------------*/

.header-contact
{
  width:100%;
  height:100vh;
}
.contact-container
{
  width:360px;
  height:400px;
  margin:3% auto;
  background:#fff;
  border-radius:5px;
  position:relative;
	overflow:hidden;
}

.contact-container h3
{
  text-align:center;
  text-transform:uppercase;
  margin-bottom:40px;
  color:#999;
}

.contact-container form
{
  width:300px;
  position:absolute;
  top:100px;
  left:40px;
  transition:.5s;
  
}

.contact-container form input
{
  width:100%;
  padding:10px 5px;
  margin:5px 0;
  border:0;
  border-bottom:1px solid #999;
  outline:none;
  background:transparent;
}

.contact-container form .btn-box
{
  width:100%;
  margin:20px auto;
  text-align:center;
  
}

.contact-container form .btn-box button
{
  width: 100px;
  height:35px;
  border:0;
  outline:none;
  border-radius:30px;
  background:linear-gradient(45deg,#4000FF,#FF00BF);
  color:#fff;
  cursor:pointer;
}

#Form2
{
  left:450px;
}

#Form3
{
  left:450px;
}
.step-row
{
  width:360px;
  height:40px;
  margin:0 auto;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  box-shadow:0 -1px 5px -1px #000;
  position:relative;
}
.col-step
{
  flex-basis:33%;
  min-width:120px;
  text-align:center;
  color:#fff;
  position:relative;
}
.col-step small
{
  color:#fff;
}
#Progress
{
  position:absolute;
  width:30%;
  height:100%;
  background:linear-gradient(to right,#4000FF,#FF00BF);
	transition:1s;
}
#Progress::after{
  position:absolute;
  content:"";
  width:0;
  height:0;
  border-top:20px solid transparent;
  border-bottom:20px solid transparent;
  border-left:20px solid #FF00BF;
  right:-20px;
  top:0;
}
/*End Contact Page*/

/*Start Cart Page--------------------------------------------------------------------------------------*/
.carts
{
  margin:50px auto;
}
.small-container
{
  max-width:1080px;
  margin:0 auto;
  text-align:center;
}
.carts table
{
  width:100%;
  border-collapse:collapse;
}

.carts table th
{
  text-align:left;
  padding:5px;
  color:#fff;
  background:linear-gradient(45deg,#4000FF,#FF00BF);
}
.carts table th:last-child
{
  text-align:right;
}
.carts table td
{
  text-align:left;
  padding:5px;
}
.carts table td:last-child
{
  text-align:right;
}
.cart-info
{
  display:flex;
  flex-wrap:wrap;
  margin:10px 0;
}
.cart-title
{
  text-align:left;
  margin-left:10px;
}
.cart-title p,small
{
  color:#333;
}
.cart-title a
{
  text-decoration:none;
  color:#FF00BF;
  font-weight:bold;
}
table td input
{
  width:50px;
  height:30px;
  padding:5px;
}
.total-price
{
  display:flex;
  justify-content:flex-end;
}
.total-price table
{
  width:100%;
  border-top:3px solid #FF00BF;
  max-width:460px;
}
/* Start Cart Media ----------------------------------------------------------------------*/

@media screen and (max-width: 380px){
    .nav-product .ul-product {
      top: 58px;
  }
  .carts table {
    width: 95%;
  }
}

/*End Cart Page*/

/*Start Scroll Up for Window--------------------------------------------------------------------------*/
#scrUp
{
	width:50px;
	height:50px;
	background:linear-gradient(45deg,#0000FF,#FF00BF);
	color:#fff;
	font-size:30px;
	display:none;
	text-align:center;
	line-height:60px;
	position:fixed;
	right:10px;
	bottom:10px;
	cursor:pointer;	
} 
#scrUp span
{
  display:block;
  text-align:center;
}