/* Layout Styles
======================================= */
.win-11-banner .mobile,
.win-11-performance .mobile,
.win-11-m365-promo .m365-promo-mobile,
.win-11-prod-carousel {
  display: none;
}
.win-11-btn {
  background: transparent;
  outline: none;
  border: 1px solid #000;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  font-size: 14px;
  color: #000;
}
.win-11-products {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  margin: 2.5rem auto;
}
.win-11-products div {
  flex: 1;
}
.win-11-products div a {
  padding: 1rem 0 0;
}
.win-11-products div img {
  padding: 0 0 1rem;
}
.win-11-video {
  margin: 1rem auto;
}
.win-11-securtiy, 
.win-11-apps,
.win-11-passwords {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 2rem 0;
}
.win-11-m365-promo {
  margin: 2rem 0;
}
.win-11-legend {
  padding: 2rem 0 0;
}
.win-11-prod-carousel {
  margin: 0 34px;
}

.win-11-carousel .slick-slider .slick-next,
.win-11-carousel .slick-slider .slick-prev {
  top: unset;
  width: 40px;
  height: 30px;
  bottom: -30px;
  border: none;
}

.win-11-carousel-wrapper {
  position: relative;
}

.win-11-carousel-content {
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  max-width: 220px;
}

.win-11-carousel-mobile-content {
  display: none;
  text-align: center;
}

.win-11-banner {
  position: relative;
}
.win-11-banner-content {
  position: absolute;
  top: 50%;
  right: 200px;
  width: 400px;
  transform: translateY(-50%);
}
.win-11-speed,
.win-11-secure,
.win-11-efficient,
.win-11-battery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7rem;
  margin: 6rem auto;
}
.win-11-speed-content,
.win-11-secure-content,
.win-11-efficient-content,
.win-11-battery-content {
  width: 400px;
}
.win-11-speed-image,
.win-11-secure-image,
.win-11-efficient-image,
.win-11-battery-image {
  width: 500px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 50px -15px #00000033;
}
.win-11-features img {
  width: 400px;

}
.win-11-disclosures {
  border-top: 1px solid #ccc;
  padding: 20px 0;
  margin: 20px 0;
}
.win-11-gradient-text {
      font-weight: 600;
      background: linear-gradient(135deg, #10254D 0%, #0052BC 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
/* Font Styles
======================================= */
.win-11-support h3,
.win-11-features h3,
.win-11-find-pc div h3,
.win-11-start-fresh div h3,
.win-11-securtiy div h3, 
.win-11-apps div h3,
.win-11-passwords div h3,
.win-11-carousel-content h3,
.win-11-carousel-mobile-content h3,
.win-11-disclosures h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.win-11-speed-content h3,
.win-11-secure-content h3,
.win-11-efficient-content h3,
.win-11-battery-content h3 {
  font-size: 42px;
  font-weight: 400;
  line-height: normal;
  padding: 10px 0;
}

.win-11-speed-content small,
.win-11-battery-content small {
  font-size: 10px;
  line-height: 14px;
  display: block;
  padding: 10px 0;
}

.win-11-banner-title {
  font-size: 60px;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 1rem;
}

.win-11-banner-description {
  font-size: 1.2rem;
  margin: 0 0 1.5rem;
}

.win-11-speed-content

.win-11-support p,
.win-11-features p,
.win-11-find-pc div p,
.win-11-start-fresh div p,
.win-11-securtiy div p, 
.win-11-apps div p,
.win-11-passwords div p,
.win-11-carousel-content p {
  font-size: 1rem;
}

.win-11-highlights,
.win-11-products,
.win-11-m365-promo {
  padding: 0 34px;
}

.win-11-disclosures p {
  font-size: 14px;
  margin: 10px 0;
  line-height: 15px;
}

/* Media Queries
======================================= */

@media (max-width: 1023px) {
  .win-11-banner-title {
    font-size: 46px;
  }
  .win-11-speed-content h3,
  .win-11-secure-content h3,
  .win-11-efficient-content h3,
  .win-11-battery-content h3 {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .win-11-banner-content {
    position: absolute;
    top: 15%;
    right: unset;
    width: unset;
    padding: 0 34px;
    transform: none;
    text-align: center;
  }

  .win-11-speed,
  .win-11-secure,
  .win-11-efficient,
  .win-11-battery {
    flex-direction: column-reverse;
    margin: 0 0 4rem 0;
    gap: 1rem;
  }
  .win-11-secure,
  .win-11-battery {
    flex-direction: column;
  }
  .win-11-video {
    background: aliceblue;
    padding: 1rem;
  }
  .win-11-banner-description {
    font-size: 1.2rem;
    margin: 0 0 1.5rem;
  }
  .win-11-speed-content,
  .win-11-secure-content,
  .win-11-efficient-content,
  .win-11-battery-content {
    width: unset;
    text-align: center;
  }
  .win-11-speed-image,
  .win-11-secure-image,
  .win-11-efficient-image,
  .win-11-battery-image {
    width: unset;
  }
  .win-11-highlights,
  .win-11-m365-promo,
  .win-11-battery {
    padding: 0 30px;
    margin: 40px 0;
  }
  .win-11-banner .mobile,
  .win-11-find-pc .win-11-find-pc-mobile-img,
  .win-11-carousel-mobile-content,
  .win-11-m365-promo .m365-promo-mobile,
  .win-11-performance .mobile,
  .win-11-prod-carousel {
    display: block;
  }
  .win-11-banner .desktop,
  .win-11-find-pc .win-11-find-pc-desktop-img,
  .win-11-carousel-content,
  .win-11-m365-promo .m365-promo-desktop,
  .win-11-performance .desktop,
  .win-11-products {
    display: none;
  }
  .win-11-carousel-item p {
    text-align: center;
  }
  .win-11-carousel-item a {
    display: block;
    text-align: center;
    margin: auto;
    width: 100%;
  }
  .win-11-features div,
  .win-11-products div {
    flex: unset;
  }
  .win-11-features div {
    width: 100%;
    max-width: 400px;
    margin: auto;
    text-align: center;
  }
  .win-11-products div {
    width: 45%;
  }
  .win-11-find-pc div {
    bottom: 50px;
  }
  .win-11-start-fresh {
    flex-direction: column-reverse;
  }
  .win-11-find-pc,
  .win-11-start-fresh {
    max-width: 400px;
}
  .win-11-start-fresh .win-11-start-fresh-content {
    padding: 3rem 0;
    width: unset;
  }
  .win-11-start-fresh .win-11-video-container {
    width: unset;
  }
  .win-11-start-fresh-thumbnail {
    height: 260px;
    width: 400px;
    object-fit: cover;
  }
  .win-11-find-pc div {
    margin: 0 1.5rem 0 2rem;
  }
  .win-11-find-pc .win-11-find-pc-mobile-img {
    width: 100%;
    height: 540px;
  }
  .win-11-start-fresh {
    align-items: flex-start;
  }
  .win-11-start-fresh-content h3,
  .win-11-start-fresh-content p,
  .win-11-find-pc div {
    max-width: unset;
  }
  .win-11-securtiy, 
  .win-11-apps,
  .win-11-passwords {
    text-align: center;
    flex-direction: column;
    gap: 1rem;
  }
  .win-11-passwords div p {
    margin: auto;
  }
  .win-11-securtiy div,
  .win-11-apps div,
  .win-11-passwords div, 
  .win-11-securtiy img,
  .win-11-apps img,
  .win-11-passwords img {
    width: unset;
    padding: 0;
    max-width: 350px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .win-11-start-fresh .win-11-start-fresh-content {
    padding: 0;
  }
  .win-11-highlights,
  .win-11-battery {
    padding: 0 34px;
  }
  .win-11-banner-content {
    top: 55%;
    right: 20px;
  }
  .win-11-speed, .win-11-secure, .win-11-efficient, .win-11-battery {
    gap: 2rem;
  }
  .win-11-find-pc div {
    margin: 0 1.5rem;
  }
}