.productOverviewBody{ overflow-x: hidden; } .productoverviewmain { background-image: url("../../dist/assets/imgs/productoverview/productbg.png"); background-color: white; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; } $PO_footerText: 0.7rem; .photo_dual { width: 40rem; } .price_footer { background: rgba(255, 255, 255, 0.25); /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */ backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.18); border: 2px solid; position: absolute; //head z-index: 999; bottom: 0; left: 0; .price_footerContainer{ // padding-left: 3rem; // padding-right: 3rem; } } @media (max-width:768px){ .footerDesText{ width: 100%; } } .boxImgContainer { width: 4rem; } .priceCut_multi { font-size: $PO_footerText; } .PO_learnMore { font-size: $PO_footerText; } .productOverview .overviewProductHeading { font-size: 2.1rem; font-family: "satoshi", sans-serif; font-weight: 500; } .productOverview .overviewProductFullTitle { padding: 2rem 11rem; font-size: 3rem; font-family: "orbitron", sans-serif; } .productOverview .overviewProductDes { padding: 0 2rem; font-size: 1.5rem; font-family: "satoshi", sans-serif; } .PO_galleryContainer .PO_gallery_display { min-height: 500px; width: 100%; background: white; background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%); position: relative; overflow: hidden; } .PO_galleryContainer .PO_gallery_display .PO_gallery_display_img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%); } .PO_gallery_box { padding: 1rem; } .PO_galleryContainer .PO_gallery_box_inner { padding: 1rem; background-color: #eeeeee; } .mobileAw{ display: none; } .productoverBox { height: 900px; .productoverBox-1 { height: 225px; } .productoverBox-2 { height: 225px; .futureProof { position: relative; } .futureProofImg { position: absolute; top: 0; right: 0; width: 50%; } } .productoverBox-3 { height: 225px; } .productoverBox-4 { height: 225px; } .productoverBox-5 { height: 200px; overflow: hidden; .box_innerImg { position: absolute; right: 8%; top: 0; height: 100%; img { scale: 1.2; } } } .productoverBox-6 { height: 150px; } .productoverBox-7 { height: 225px; position: relative; .gridTruelifeImg { position: absolute; width: 85%; bottom: 0; left: 0; } } .productoverBox-8 { height: 60px; } .productoverBox-9 { height: 230px; } .productoverBox-10 { height: 150px; } .productoverBox-11 { height: 180px; } .productoverBox-12 { height: 75px; } .PO_box { // background-color: red; height: 100%; >div { padding: 1rem 0rem; } .box_inner { // height: 100%; position: relative; } .bgBox_Content { background: rgb(236, 236, 236); background: linear-gradient(90deg, rgba(236, 236, 236, 1) 4%, rgba(118, 118, 118, 1) 100%); } .box_inner_right { padding-left: 1rem; } .box_inner_left { padding-right: 1rem; } } } // specsgrid .specsgrid { display: grid; height: 100vh; gap: 20px; grid-template-columns: repeat(8, minmax(5%, 1fr)); grid-template-rows: repeat(12, minmax(5%, 1fr)); .specsItem { background-color: red; } .specsItem-1 { grid-column: 1/4; grid-row: 1/4; } .specsItem-2 { grid-column: 1/4; grid-row: 1/4; } } // specsgrid end .displayscreenpad { .displayscreenpadContainer { text-align: center; } .displayscreenpadHeading { font-size: 8rem; } .displayscreenpadMain { // top: -108px; margin-top: -8%; } .displayscreenpadleft { >img { left: -8%; } } .displayscreenpadright { >img { right: -10%; } } } .dual_des_heading { font-size: 3rem; } .dualLaptop { width: 100vw; // height: 1300px; top: -100px; margin-top: 100px; margin-bottom: -100px; position: relative; // overflow-x: hidden; .zeroBMain_desP { font-size: 1.2rem; } .zeroBMain_des { position: absolute; top: 0; right: 0; max-width: 700px; padding-right: 9rem; } .dualImgs { position: absolute; .dualImgsInner { width: 50rem; } } .dualImgsOne { top: 0; left: -10rem; transform: rotate(343deg); width: 68%; } .dualImgsTwo { // top:0; // right: -80%; // transform: rotate(330deg); top: 14rem; right: -62%; transform: rotate(339deg); .dualImgsInner { width: 82%; } } } .tableLaptop { margin-top: 300px; // border: 1px solid; height: 90vh; width: 100vw; position: relative; .circleTableLaptop_Heading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -311%); } .justTableLaptop { position: absolute; width: 86%; top: -10px; right: 128px; z-index: 1; } .circleTableLaptop { background-color: #ececec; height: 70rem; width: 70rem; border-radius: 50%; position: relative; overflow: hidden; .circleTableLaptopTop { bottom: -3%; width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 2%); } } .circleTableLaptop_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 106%); } margin-bottom: 300px; } .trueLifeDisplay { .trueLifeDisplay_headingHD { >.headingLife { font-size: 6rem; } } .trueLifeDisplay_des { padding: 0 10rem; } } .font_p_Dual { font-size: 1.2rem; } .tableLaptopTwo{ width: 100vw; height: 100vh; background-image: url("../../dist/assets/imgs/sectiontest.png"); background-color: white; background-size: contain; background-repeat: no-repeat; background-position: center; } .dragondisplay { position: relative; background: rgb(255, 255, 255); background: linear-gradient(184deg, rgba(255, 255, 255, 1) 4%, rgba(235, 255, 133, 1) 100%); overflow: hidden; .dragondisplay_heading { position: absolute; bottom: -4%; margin: auto; width: 100%; >h1 { font-size: 8rem; text-align: center; } } .dragondisplay_des { max-width: 600px; position: absolute; right: 0; top: 13%; padding: 4rem; } } .intelGen { .intelGenUL { max-width: 250px; gap: 8rem; .intelGenULHeading { font-size: 1.8rem; font-weight: 700; border-bottom: 2px solid; } } .cpuSection { background-image: url("./../../dist/assets/imgs/productoverview/cpu.png"); background-color: white; background-size: cover; background-repeat: no-repeat; background-position: center; } } @media (max-width:1200px) { // section .productOverview { .p-6{ padding:0; } .overviewProductFullTitle{ padding: 2rem 5rem; font-size: 2rem; } } // section .productOverview { >div { padding: 0; } } // seciton .dualLaptop .dualImgsTwo .dualImgsInner { transform: rotate(339deg) translateX(57%) translateY(55%); } // section .productOverview .overviewProductFullTitle { font-size: 1rem; padding: 2rem 0rem; } .productOverview .overviewProductDes { font-size: 0.7rem; padding: 0.5rem; } .PO_galleryContainer .PO_gallery_display .PO_gallery_display_img { width: 100%; } .PO_galleryContainer .PO_gallery_display { min-height: 300px; } .PO_gallery_box { padding: 0; } .PO_galleryContainer .PO_gallery_box_inner { padding: 0; } .productoverBox.px-6 { padding: 1rem; margin: 0; height: max-content; } // ssection end .displayscreenpad { .displayscreenpadHeading { font-size: 4rem; } } // section end .dualLaptop { .dual_des_heading { font-size: 2rem; } .zeroBMain_des { padding-right: 0; .zeroBMain_desP { font-size: 0.8rem; max-width: 400px; } } } //section .controlPanel { .controlPanel_des{ top: -110px; >h1 { font-size: 2.5rem; } } } } @media (max-width:1000px){ .dualpassage{ padding-left: 10rem; padding-right: 2rem; } } @media (max-width:790px) { .productOverview { .p-6{ padding:0; } .overviewProductFullTitle{ padding: 2rem 0; font-size: 1rem; } .overviewProductDes{ font-size: 0.7rem; } } // section // section .displayscreenpad { .displayscreenpadHeading { font-size: 2rem; } } .dualLaptop { .dual_des_heading { font-size: 1rem; } .zeroBMain_des { // padding-right: 3rem; .zeroBMain_desP { font-size: 0.7rem; max-width: 400px; } } } // section .controlPanel{ .controlPanel_des{ >h1 { font-size: 1.9rem; } } } } @media (max-width:670px) { .zeroBMain_des{ display: none; } .mobileAw{ display: block; } } // media quiue @include respond(phone) { .p-6 { padding: 0; } .productoverviewmain .displayscreenpad .displayscreenpadHeading { font-size: 5rem; } .banner_heading_4 { font-size: 2rem; } // section 3 .displayscreenpad { .displayscreenpadHeading { font-size: 2rem; } .displayscreenpadMain { top: 0; } .twoScreenHeading{ font-size: 1rem; } } // section 5 .tableLaptop { margin-top: 20%; margin-bottom: 0; height: max-content; .dual_des_heading { font-size: 1rem; } .circleTableLaptop { height: 300px; } .circleTableLaptop .circleTableLaptopTop { bottom: -3%; width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 2%); } .circleTableLaptop_Heading { position: absolute; top: 4%; left: 50%; transform: translate(-50%, 0); } .justTableLaptop { position: absolute; width: 86%; top: 26%; right: 30px; z-index: 1; } .circleTableLaptop_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0%); } } .trueLifeDisplay { margin-top: 50px; .trueLifeDisplay_headingHD { >h1, .headingLife { font-size: 2rem; } } .trueLifeDisplay_des { padding: 1rem; .font_p_Dual { font-size: 0.9rem; } } } // section 6 .controlPanel { margin-top: 3rem; padding-bottom: 100px; //heading h1 >.p-5 { padding: 0 !important; } .bgControlpanel { min-height: 85vh; .bgControlpaneltabs { top: 55%; right: 0; transform: translateY(-50%); } } .controlPanel_des { top:0%; width: 100%; left: 50%; text-align: center; transform: translateX(-50%); margin: 1rem 0; margin: 1rem 0; >h1 { font-size: 1.2rem; } } .bgControlpaneltabs { padding: 0.1rem !important; padding-top: 3rem !important; >.nav-tabs { padding: 0; } >ul { padding: 1rem; } #tabLaptopContent { padding: 1rem; } } } // section 7 .proSection{ .designedProLaptop_title{ .designedProLaptop_title_text { font-size: 2rem; } } } // // popupKeyboard // .popupKeyboard { // padding: 1rem; // .popupKeyboard_heading { // >h1 { // font-size: 2rem; // } // } // .popupKeyboard_hParent .popupKeyboard_des { // max-width: max-content; // font-size: 0.9rem; // } // } }