#main {
     width: 100%;
     height: 100%;
     position: relative;
     margin-top: 0;
}



.main-container {
     width: 100%;
     margin: auto;
     position: relative;
}

#slider {
     width: 100%;
     height: 650px;
     position: relative;
}


.slider-container {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
}

.slider-image {
     transition: 800ms;
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
}

.slider-image img {
     width: 100%;
     height: 100%;
}

.prev {
     width: 20px;
     height: 20px;
     border-top: 2px solid black;
     border-left: 2px solid black;
     position: absolute;
     rotate: -45deg;
     z-index: 10;
     top: 50%;
     left: 20px;
     cursor: pointer;
     translate: -50% -50%;
}

.next {
     width: 20px;
     cursor: pointer;
     height: 20px;
     border-top: 2px solid black;
     border-left: 2px solid black;
     position: absolute;
     rotate: 135deg;
     z-index: 10;
     top: 50%;
     right: 0;
     translate: -50% -50%;
}

/* ! Mid Section */

#mid-image {
     position: relative;
     width: 100%;
     margin-top: 20px;
}

.mid-image {
     width: 100%;
     margin: auto;
     display: flex;
}

.mid-image img {
     width: 100%;
}



/* Card */
#card-section {
     width: 100%;
}

.card-container-heading {
     width: 100%;
     text-align: center;
}

.card-container-heading img {
     width: 100%;
}

#card-container {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 20px;
}

.cards {
     width: 100%;
}

.cards img {
     width: 100%;

}

/* button */

#gotoTop {
     width: 180px;
     margin: 20px auto 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

#gotoTop a {
     width: 100%;
     padding: 10px 15px;
     height: 100%;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     color: black;
     background: #abc72c;
}

#gotoTop span:first-child {
     font-size: 2rem;
}

#gotoTop span:last-child {
     font-size: 1.2rem;
}





/* ? ayaz bhai css */
#ayaz-main {
     width: 90%;
     margin: auto;
}

#deals {
     border: 0px solid red;
     width: 100%;
     margin: auto;
     margin-top: 20px;
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 15px;
}

#deals div {
     cursor: pointer;
}

#deals div>img {
     width: 100%;
}

#brand_of_week {
     border: 0px solid red;
     width: 100%;
     margin: auto;
     margin-top: 20px;
     text-align: center;
}

.bow_poster {
     border: 0px solid blue;
     width: 100%;
     margin: auto;
     margin-top: 5px;
     margin-bottom: 10px;
}

.bow_poster>img {
     width: 100%;
}

.bow_cards {
     border: 0px solid yellow;
     width: 100%;
     margin: auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
}

.bow_cards img {
     width: 100%;
}

.bow_cards div {
     cursor: pointer;
}

.bow_cards p {
     font-size: 18px;
     margin-top: 3px;
}

#just_landed {
     /* border: 3px solid green; */
     width: 100%;
     height: fit-content;
     margin: 20px auto;
     display: flex;
     flex-direction: column;
}

.jl_poster {
     /* border: 1px solid blue; */
     width: 100%;
     margin: auto;
}

.jl_poster img {
     width: 100%;
}

#jl_container {
     /* border: 2px solid pink; */
     width: 100%;
     height: 400px;
     margin: auto;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 2px;
}

.jl_pl-container {
     width: 100%;
     height: 100%;
     /* border: 1px solid red; */
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
}

.jl_pl-container .product-item {
     height: 80%;
}

.jl_video {
     /* border: 1px solid black; */
     text-align: center;
     height: 100%;
}

.jl_video img {
     width: 100%;
     height: 100%;
}

.jl_video p {
     font-size: 15px;
}

.jl_overlay {
     position: fixed;
     display: none;
     width: 100%;
     height: 100vh;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 4;
     cursor: pointer;
}

.jl_overlay div {
     width: 40%;
     margin: auto;
     /* margin-top: 30px; */
}

.jl_iframe {
     background-color: white;
     z-index: 5;
}

.jl_vm-btn {
     border: 0px;
     background-color: white;
     font-size: 14px;
     cursor: pointer;
     margin-left: 75%;
     width: 23%;
     font-family: Avenir-NextBold, sans-serif;
     font-weight: bolder;
     font-weight: 900;
}

.jl_x-btn {
     border: 0px;
     background-color: white;
     font-size: 19px;
     cursor: pointer;
     margin-left: 90%;
     width: 10%;
     color: #FF3399;
     font-family: Avenir-NextBold, sans-serif;
     font-weight: bolder;
     font-weight: 900;
}

.jl_x-btn span {
     font-weight: 900;
}



@media all and (min-width:100px) and (max-width:800px) {
     .bow_cards {
          border: 0px solid yellow;
          width: 100%;
          margin: auto;
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 20px;
     }

     #jl_container {
          border: 1px solid pink;
          width: 100%;
          margin: auto;
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 2px;
     }


}











/*? --------- Sejal main css----------- */

#beautyPass {
     width: 95%;
     margin: auto;
     margin-top: 30px;
}

#beautyPass>img {
     width: 100%;
     height: 100%;
}

#lazy-girl {
     width: 95%;
     display: block;
     margin: auto;
}

#lazyimg {
     width: 95%;
     height: 25%;
}

#lazyimg>img {
     width: 100%;
     height: 100%;
}

#lazy-girl-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(1, auto);
     gap: 15px;
}

#lazy-girl-grid>div {
     width: 100%;
}

#lazy-girl-grid>div>img {
     width: 100%;
     height: 93%;
}

#fav-brand {
     width: 95%;
     display: block;
     margin: auto;
     padding: 1%;
}

#fav-tag {
     width: 100%;
     height: 60%;
     padding: 0% 0% 1% 0%;
}

#fav-tag>img {
     width: 100%;
     height: 100%;
}

#favimgs {
     width: 100%;
     height: 50%;
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 15px;
}

#favimgs>div {
     padding: 5px;
}

#favimgs>div>img {
     width: 100%;
     height: 85%;
}

#newBlock {
     display: block;
     width: 95%;
     margin: auto;
     padding: 1%;
}

#newBlocktag {
     height: 20%;
     width: 100%;

}

#newBlocktag>img {
     height: 100%;
     width: 100%;
}

#newblockimgs {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(2, 1fr);
     width: 100%;
     height: 80%;
     gap: 10px;
}

#newblockimgs>div>img {
     width: 100%;
     height: 100%;
}

#sephoraDiaries {
     width: 95%;
     margin: 20px auto auto auto;
     display: block;
     padding: 2px;
}

#sephoraDiariestag {
     width: 100%;
     height: 25%;
}

#sephoraDiariestag>img {
     width: 100%;
     height: 100%;
}

#sephoraDiariesimg {
     height: 70%;
     width: 100%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
}

#sephoraDiariesimg>div {
     display: block;
     height: 100%;

}

#sephoraDiariesimg>div>img {
     width: 100%;
     height: 80%;
}

.sephoraDiariesp {
     padding: 5px 0px 5px 0px;
     font-size: 20px;
}

@media all and (min-width: 768px) and (max-width: 1024px) {

     #slider .sephoraDiariesp {
          font-size: 15px;
     }

     #slider {
          height: 450px;
     }
}

@media all and (min-width: 320px) and (max-width: 767px) {

     .sephoraDiariesp {
          font-size: 12px;
          margin-top: 10px;
     }

     .sephoraDiariesp+p {
          font-size: 8px;
     }

     

     #slider {
          height: 350px;
     }

}