*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
.navi{
    background-color: darkmagenta;
}
.collapse ul li a{
    color: #f1f1f1;
}
.container-fluid a{
    color: #f1f1f1;
}
.di{
    color: #2a142a !important;
}
.di:hover{
    background-color:deeppink !important;
}
#size{
    width: 100%;
    height: 120vh;
}
.banner1{
    width: 100%;
    margin-top: 70px;
    background-color: #f5f5f5 !important;
}
.banner1 h1{
    text-align: center;
    font-size: 20px;
    color: black;
}
.banner1 a{
    text-decoration: none !important;
}
.banner1 p{
    text-align: center;
    font-size: 15px;
    color: black;
    border-bottom: 1px solid lightgray !important;
}

.thelatest{
    width: 90%;
    margin: auto;
}
.h1 h1{
    font-size: 25px;
    text-align: left;
    margin-bottom: 30px;
}
.thelatest img{
    width: 100%;
    height: 100%;
}

.shopbanner1{
    width: 100%;
    margin-bottom: 60px;
}
.shopbanner1 h1{
    font: inherit;
    font-size: 60px;
    font-weight: 1000;
    text-align: center;
    margin-top: 60px;
}
.shopbanner1 p{
    text-align: center;
    font-size: 15px;
    margin-bottom: 40px;
}
.shopbanner1 a{
    text-decoration: none;
}
#shop{
    font-size: 15px;
    padding: 6px 20px;
    margin-left: 40rem;
    background-color: black;
    border-radius: 20px;
    color: #f5f5f5;
    transition: .4s;
}
#shop:hover{
    background-color: #333;
}

.trend{
    width: 90%;
    margin: auto;
}
.h1 h1{
    font-size: 25px;
    text-align: left;
    margin-bottom: 30px;
}

.grid{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.card{
    width: 100%;
}
.card img{
    width: 100%;
    height: 70vh;
}
.card-bottom{
    display: grid;
    grid-template-columns: auto auto;
}

.card-bottom a{
    text-decoration: none;
}
.side-left{
    padding-left: 10px;
}
.side-left a{
    text-decoration: none;
}
.side-left h1{
    font-size: 20px;
    color: black;
    text-transform: capitalize;
    padding-top: 10px;
}
.side-left p{
    color: black;
    opacity: 0.7;
    text-transform: capitalize;
}
.side-right p{
    color: black;
    text-align: right;
    padding-right: 10px;
}

.carousel-inner{
    margin-bottom: 60px;
}


/* dont  miss */

.dontmiss{
    width: 90%;
    margin: auto;
}
.dontmiss-div{
    width: 90%;
    margin: auto;
}
.dontmiss-div img{
    width: 100%;
    height: 100%;
    margin-bottom: 60px;
}

/* featured */

.featured{
    width: 90%;
    margin: auto;
}
.featured-div{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 20px;
    margin-bottom: 60px;
}
.card1-div{
    height: 100vh;
    background-repeat: no-repeat;
}
.card1-div img{
    height: 100vh;
    width: 100%;
}
.card1-div h1{
    font-size: 20px;
    color: #fff;
    margin-top: 90%;
    padding-left: 40px;
    padding-bottom: 40px;
}
.card1-div a{
    text-decoration: none;
}
#color{
    padding: 6px 20px;
    border-radius: 20px;
    color: black;
    background-color: #fff;
    transition: 0.5s;
    margin-left: 40px;
}
#color:hover{
    background-color: #333;
    color: #fff;
}

.card2-div{
    height: 100vh;
    background-repeat: no-repeat;
}
.card2-div img{
    height: 100vh;
    width: 100%;
}
.card2-div h3{
    font-size: 18px;
    color: #fff;
    margin-top: 87%;
    padding-left: 40px;
}
.card2-div h1{
    font-size: 20px;
    color: #fff;
    padding-left: 40px;
    padding-bottom: 40px;
}
.card2-div a{
    text-decoration: none;
}

/* banner2 */

.shopbanner2{
    width: 100%;
    margin-bottom: 60px;
}
.shopbanner2 h1{
    font: inherit;
    font-size: 60px;
    font-weight: 1000;
    text-align: center;
    text-transform: uppercase;
}
.shopbanner2 p{
    text-align: center;
    font-size: 15px;
}
.shopbanner2 a{
    text-decoration: none;
}
#shop1{
    font-size: 15px;
    padding: 6px 20px;
    margin-left: 46rem;
    background-color: black;
    border-radius: 20px;
    color: #f5f5f5;
    transition: .4s;
}
#shop1:hover{
    background-color: #333;
}


/* new div */

.iconic{
    width: 90%;
    margin: auto;
}

.card-div img{
    height: 40vh;
}

/* mid3 */
.mid3{
    height: 110vh;
    width: 100%;

}
.mid3b{
    height: 90vh;
    width: 100%;
    padding-top: 20px;
}
.mid3b video{
    height: 90vh;
    width: 100%;
}

/* mx */
.mx{
    height: 80vh;
    width: 100%;
}
.mxr{
    height: 80vh;
    width: 80%;
    margin: auto;
}
.mxr1{
    float: left;
    width: 45%;
    height: 80vh;
}
.container1 {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .container1 img {
    vertical-align: middle;
    border-radius: 20px;
}
  
  .container1 .content1 {
    position: absolute;
    bottom: 0;
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
  }
.mxr2{
    float: right;
    width: 50%;
    height: 80vh;
}
.mxr2a{
    height: 37vh;
    width: 100%;
}
.mxr2a img{
    height: 37vh;
    width: 100%;
}
.mxr2b{
    height: 37vh;
    width: 100%;
    margin-top: 45px;
}
.mxr2b img{
    height: 37vh;
    width: 100%;
}

/* ml */
.ml{
    height: 60vh;
    width: 100%;
    margin-top: 40px;
}
.mlr{
    height: 60vh;
    width: 80%;
    margin: auto;
}
.mlr1{
    height: 60vh;
    width: 40%;
    float: left;
}
.ml1r1 h1{
    padding: 20px;
    font-size: 25px;
    color: darkmagenta;
}
.ml1r1 h3{
    padding-left: 20px;
    font-size: 35px;
    color: gray;
}
.ml1r1 p{
    padding: 20px;
    font-size: 15px;
    color: black;
}
.mlr2{
    height: 50vh;
    width: 50%;
    float: right;
}
.mlr2 img{
    height: 50vh;
    width: 100%;
    border-bottom: solid 1px darkmagenta;
    border-top: solid 1px darkmagenta;
    border-left: solid 1px darkmagenta;
    border-right: solid 1px darkmagenta;
    border-radius: 20px;
}
/* footer */
.content {
    height: 70vh; }
  
  .footer-20192 {
    margin-top: 50px;
    position: relative;
    color: #fff;
    padding: 7rem 0;
    background-color: #2a142a; }
    .footer-20192 .container {
      position: relative; }
      .footer-20192 .container .ml-auto {
        padding-left: 700px;
      }
    .footer-20192 h3 {
      font-size: 16px;
      margin-bottom: 10px;
      margin-top: 0;
      line-height: 1.5; }
    .footer-20192 .links li {
      margin-bottom: 10px;
      line-height: 1.5;
      display: block; }
      .footer-20192 .links li a {
        color: #666873; }
        .footer-20192 .links li a:hover {
          color: #fff; }
    .footer-20192 .social li {
      display: inline-block;
      position: relative; }
      .footer-20192 .social li a {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-block;
        margin: 0;
        padding-left: 10px;
        background-color: #d581d2;
        color: #fff; 
        font-size: 25px;}
        .footer-20192 .social li a > span {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
    .footer-20192 .footer-logo {
      color: #fff;
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: .1rem; }
    .footer-20192 .copyright {
      color: #666873; }
    .footer-20192 .cta {
      -webkit-box-shadow: -20px -20px 0 0 rgba(52, 58, 64, 0.2);
      box-shadow: -20px -20px 0 0 rgba(52, 58, 64, 0.2);
      padding: 20px;
      background-color: #d581cd;
      top: -150px;
      position: relative; }
      .footer-20192 .cta h2, .footer-20192 .cta h3 {
        line-height: 1.5; }
      .footer-20192 .cta h3 {
        font-size: 20px; }