.Product_Page{ .newProductPageV2 { padding: 10px; background-color: var(--themeUltraLight); } .newProductPageV2Main { background-color: #ffffff; padding: 10px; border-radius: 20px; align-items: center; grid-template-columns: 1fr 500px; } .imagesV2 { display: grid; grid-template-columns: 130px auto; gap: 10px; align-items: flex-start; position: relative; } .allImages { /* display: grid; grid-template-columns: 1fr; grid-template-rows: 130px; */ gap: 10px; max-height: 600px; overflow: hidden; display: flex; flex-direction: column; } .slideBtn { background-color: #ffffffaa; padding: 5px; position: absolute; text-align: center; width: 120px; z-index: 9; cursor: pointer; left: 0; transition: 0.5s; } .slideBtn:hover { background-color: #ffffff; } .slideBtnTop { top: 0; } .slideBtnBottom { bottom: 0; } .mainImage { position: relative; height: auto; aspect-ratio: 1/1; border: 0.1px solid #00000029; display: flex; align-items: center; justify-content: center; } .zoomSec { position: absolute; bottom: 10px; right: 10px; width: 50px; height: 50px; background-color: var(--btnColor); border-radius: 50%; cursor: pointer; } .zoomSec svg { width: 20px; } .zoomSec svg path { fill: var(--btnTextColor); } .mainImage img { width: 100%; height: 100%; object-fit: contain; } .mainImage video { width: 100%; height: 100%; object-fit: contain; } .imageList { width: 130px; height: 130px; border: 0.1px solid #00000029; position: relative; } .imageList img, .imageList video { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; } .imagePlayBtn { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9; display: flex; align-items: center; justify-content: center; font-size: 30px; background-color: #000000aa; color: #ffffff; cursor: pointer; } .slideDescV2Heading { display: grid; grid-template-columns: 1fr 50px; font-weight: 600; font-size: 16px; padding: 10px; border: 0.5px solid #00000019; border-radius: 5px; align-items: center; cursor: pointer; margin-top: 5px; } .headingArrow { display: flex; align-items: center; justify-content: flex-end; } .slideDescV2Desc { padding: 10px; border: 0.5px solid #00000019; margin-top: 5px; } .imagesV2Sticky { position: sticky; top: 160px; } .relatedHeading { font-size: 30px; font-weight: 600; padding: 20px; } .inputOuterMain { /* background-color: white; */ padding: 15px; border-radius: 30px; /* box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.1); */ } .inputMainSec { padding: 10px 20px; border-radius: 30px; border: 1px solid #dee0ea; display: flex; align-items: center; font-weight: 500; } .inputMainSec i { font-size: 18px; margin-right: 10px; } .selectMainSec select, .selectMainSec input { border: none; width: 100%; font-size: 16px; cursor: pointer; outline: none; color: #414141; } .message{ border: none; width: -webkit-fill-available; font-size: 16px; cursor: pointer; outline: none; color: #414141; border: 1px solid #dee0ea; border-radius: 15px; padding: 10px; } .gap15{ gap: 15px; } .searchBannerBtn button { background-color: var(--btnColor); color: var(--btnTextColor); border: none; /* width: fit-content; */ padding: 10px 15px; border-radius: 30px; font-weight: 500; cursor: pointer; transition: 0.4s; font-size: 15px; } .searchBannerBtn button:hover { background-color: var(--btnHoverColor); color: var(--btnHoverTextColor); } .bannerImgMainSec img { border-radius: 20px; object-fit: cover; cursor: pointer; } .bannerImgMainSec { border-radius: 20px; overflow: hidden; } .dropBoxMain { display: none; position: absolute; top: 45px; left: 0px; width: calc(100% - 40px); padding: 15px 20px; background-color: white; border-radius: 10px; border: 1px solid #dee0ea; } .countBox { border: 1px solid #dee0ea; border-radius: 30px; height: 35px; overflow: hidden; } .minus, .plus { width: 100%; height: 100%; transition: 0.4s; cursor: pointer; } .minus i, .plus i { font-size: 15px; margin: 0px; } .minus:hover, .plus:hover { background-color: var(--themeBg2); color: var(--paragraphColorBlack); } .dropGrid { grid-template-columns: 1fr 80px; } .leftSide input { width: 40px; text-align: center; border: none; font-size: 20px; } .arrow i { margin-right: 0px; } .name{ font-size: 20px; font-weight: 600; } @media only screen and (max-width: 1250px) { .inputGrid { grid-template-columns: repeat(2, 1fr); } .bannerMain { height: 70vh; } .searchBannerBtn button { width: 100%; height: 50px; } .inputOuterMain { display: grid; grid-template-columns: 1fr 150px; align-items: center; } .bannerImgMainSec { grid-template-columns: 1fr; } } @media only screen and (max-width: 900px) { .imagesV2Sticky { position: static; } .imagesV2 { display: flex; flex-direction: column-reverse; width: 100%; } .allImages { height: auto !important; width: 100%; grid-template-columns: repeat(5, 1fr); display: flex; overflow-x: scroll; margin-bottom: 10px; flex-direction: row; } .imageList { flex: 0 0 80px; } .imageList { width: auto; height: auto; } .slideBtn { display: none; } .mainImage { width: 100%; } .relatedHeading { font-size: 20px; } .relatedCon { grid-template-columns: 1fr 1fr; } .elementBox { display: flex; flex-direction: column; text-align: center; font-size: 12px; } .eleIcon { width: 30px; height: 30px; } .newProductPageV2Main { display: block; } .reviewsHeading { grid-template-columns: 1fr 1fr; font-size: 18px; } .newProductPageV2 { padding-bottom: 170px; } .enqBtns, .cartBtns { white-space: nowrap; gap: 5px; margin: 0; } .btnsArea { display: flex; flex-direction: column; gap: 5px; } }@media only screen and (max-width: 900px){ .inputOuterMain{ grid-template-columns: 1fr; padding: 0px; } .inputGrid{ grid-template-columns: 1fr; } .name{ margin-bottom: 15px; } } }.Product_Page{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }