anwi_website/styles/pages/_productOverview.scss

.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;
  z-index: 999;
  bottom: 0;
  left: 0;
}

.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;
}

.controlPanel {
  margin-top: 10rem;
  padding-bottom: 300px;

  .controlPanel_des {
    position: absolute;
    top: -170px;
    left: 80px;
  }

  .bgControlpanel {
    min-height: 100vh;
    background-color: #ececec;
    border-radius: 157px;
    position: relative;

    .bgControlpaneltabs {
      position: absolute;
      top: 100px;
      right: 0;

      .nav-tabs {
        border-bottom: 1px solid;
        margin-bottom: 2rem;
      }

      .nav-item {
        position: relative;
        border: none;
      }

      .nav-tabs .nav-link {
        position: relative;
        color: black;
        font-weight: 500;
      }

      .nav-tabs .nav-link.active {
        border: none;
        background-color: transparent;
      }

      .nav-tabs .nav-link.active::before {
        display: block;
      }

      .nav-item .nav-link::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 5px;
        bottom: -2px;
        right: 0;
        display: none;
        background-color: black;
      }
    }
  }
}




.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;
  }
}

.osPlusSoftware {
  width: 100vw;
  height: 140vh;
  margin-top: 14rem;

  .osContianer {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 30%;

    .osContianer_des_fontParent {
      position: relative;
      top: -8%;
    }

    .osContianer_des_font {
      font-size: 2rem;
      font-weight: 600;
    }

    .osContianerHeading {
      position: relative;
      top: -15%;
    }

    .osContianerImg {
      position: absolute;
      bottom: 0;
    }
  }
}


@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: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: -26px;
    }
  }

  // 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;
  //   }
  // }
}