/*GLOBAL STYLES*/
@import url("./assets/fonts/font.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-size: 1rem;
  font-family: "SFProText", "SFProDisplay", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
  text-rendering: optimizeLegibility;
  color: #000;
  background: #f5f5f7;
  overflow-x: hidden;
}

ul {
  list-style: none;
  display: flex;
  width: 1024px;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  margin: 0 auto;
}

a {
  color: #000;
  text-decoration: none;
}

/*GLOBAL STYLES*/
/*NAVIGATION*/
.nav nav {
  width: 100%;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.8);
}

.nav nav ul li {
  height: 100%;
}

.nav nav ul li a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 100;
  font-size: 12px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  height: inherit;
}

.nav nav ul li:first-child a,
.nav nav ul li:last-child a {
  padding: 0;
}

/*NAVIGATION*/
.hero {
  margin: 0 auto;
  width: 980px;
  height: 248px;
  display: flex;
  justify-content: space-between;
}

.intro {
  width: 658.83px;
  padding: 80px 0 64px;
  font-size: 48px;
  font-family: "SFProDisplay";
}

.intro-side {
  padding: 90px 0 74px;
}

.intro-light {
  color: #6e6e73;
}

.ask,
.find-store {
  display: flex;
  padding-bottom: 16px;
}

.side-img-cont {
  padding-right: 8px;
}

.side-content {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.side-content a {
  color: #06c;
  font-weight: 300;
}

.ask-content span {
  font-weight: 500;
}

.slider {
  width: 150%;
  height: 198px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 223px;
  margin-bottom: 62px;
}

.right-btn,
.left-btn {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  outline: none;
  border: none;
  z-index: 9999;
  width: 41.59px;
  height: 41.59px;
  cursor: pointer;
  font-size: 24px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}

.category-left-btn {
  opacity: 1;
}

.left-btn,
.right-btn {
  position: absolute;
  top: 42.5%;
  opacity: 0;
  z-index: 999;
  transition: all 400ms ease-in-out;
}

.left-btn {
  left: 20px;
}

.show-btn {
  opacity: 1;
  transform: scale(1.3);
}

.right-btn {
  right: 20px;
}

.categories {
  width: 150%;
  height: 148px;
  display: flex;
  transition: all 600ms ease-in-out;
  justify-content: space-between;
}

.category {
  width: 136px;
  height: 148px;
  padding: 18px 8px 16px;
  margin: 0 6px;
  cursor: pointer;
}

.category-img {
  width: 100%;
  padding-bottom: 16px;
}

.category a {
  font-size: 14px;
  color: #000;
  display: block;
  text-align: center;
}

.category a:hover {
  text-decoration: underline;
}

.hide-btns {
  opacity: 0;
  pointer-events: none;
}

.latest {
  position: relative;
  padding-bottom: 54px;
}

.latest-slider {
  width: 100%;
  justify-content: space-between;
  display: flex;
  padding: 10px;
  margin: 0 auto;
  transition: all 400ms ease-in-out;
  transform: translateX(15%);
}

.latest-card {
  background-color: #fff;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  height: 500px;
  transition: all ease-in-out 400ms;
  width: 400px;
  margin-right: 20px;
}

.latest .contents {
  display: flex;
  flex-direction: column;
  padding: 30px;
  width: inherit;
  position: absolute;
}

.text-white {
  color: #fff;
}

.no-wrap {
  word-wrap: break-word;
}

.latest .product-name {
  font-size: 12px;
  margin: 0 0 4.8px;
  width: fit-content;
  padding: 0 0 8px;
}

.latest .tagline {
  font-size: 28px;
  letter-spacing: -0.06em;
}

.latest .price {
  padding-top: 10px;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: -0.09em;
}

.latest h2 {
  width: 980px;
  margin: 0 auto;
  font-size: 28px;
  padding: 14px 0px;
  font-family: "SFProDisplay";
}

.latest-img {
  border-radius: 18px;
}

.latest-card:hover {
  transform: scale(1.01);
  transition: all ease-in-out 400ms;
}

.help {
  padding-left: 223px;
  padding-bottom: 54px;
}

.help h2 {
  padding-bottom: 14px;
}

.card-box {
  display: grid;
  grid-template-columns: 480px 480px;
  height: 500px;
  width: fit-content;
  gap: 20px;
}

.big-card {
  grid-row: 1/3;
  border-radius: 15px;
  background: url(./assets/img/store-card-50-specialist-202108.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
}

.big-card .content {
  font-size: 28px;
  font-family: "SFProDisplay";
  padding: 30px;
}

.top-card {
  grid-row: 1/2;
  border-radius: 15px;
  background: url(./assets/img/store-card-25-apps-202108.webp), #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 240px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
}

.top-card .content {
  font-size: 24px;
  padding: 55px 30px 30px 30px;
  font-family: "SFProDisplay";
}

.top-card .content .text {
  width: 336px;
}

.bottom-card {
  grid-row: 2/3;
  border-radius: 15px;
  background: url(./assets/img/store-card-25-genius-202108.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 240px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
}

.bottom-card .content {
  padding: 30px 0px 30px 30px;
  font-size: 24px;
  width: 244px;
}

.bottom-card .content .text {
  padding-top: 25px;
}

/*shops*/
.shops-container {
  padding-left: 230px;
  width: 155.2%;
}

.shop-header {
  font-size: 24px;
  width: fit-content;
  padding-bottom: 31px;
}

.shops-card-container {
  display: flex;
  justify-content: space-between;
  padding-bottom: 40px;
}

.shops-card {
  width: 313px;
  height: 240px;
  background-color: #fff;
  border-radius: 15px;
  padding: 30px 30px 0px 30px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
}

.shop-card-icon {
  width: 36px;
}

.shop-text {
  font-size: 24px;
  font-weight: 600;
}

.icon-content {
  padding-bottom: 5px;
}

.gradient-icon {
  width: 29px;
}

.gradient-text {
  background-image: linear-gradient(
    to right,
    #f8ab5e 0,
    #f36961 20%,
    #a176c8 40%,
    #759beb 60%,
    #65beb3 80%,
    #70db96 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blue {
  color: #3f6eb8;
  fill: #3f6eb8;
}

.pink {
  color: #ff0053;
}

.light-blue {
  color: #007aff;
}

.purple {
  color: #ac39ff;
}

.green {
  color: #68cc45;
}

.shop-cards-v2 {
  padding-left: 230px;
}

.shop-cards-v2 .slider {
  height: 500px;
}

.shop-cards-v2 .title {
  padding-bottom: 14px;
}

.slider-v2 {
  padding: 10px 0px 40px 0px;
  display: flex;
  gap: 20px;
  width: 237%;
}

.card,
.card-2 {
  width: 400px;
  height: 500px;
  border-radius: 15px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
}

.card {
  background: url(./assets/img/store-card-40-accesories-bts-202206.webp), #fff;
}

.card-2 {
  background: url(./assets/img/inthenew.webp), #fff;
}

.card-3 {
  background: url(./assets/img/accessories.webp), #fff;
}

.card div {
  padding: 30px;
  width: 400px;
}

.card .alternate-head {
  font-size: 28px;
  padding-top: 24px;
}

.card .alternate-subhead {
  font-family: "SFProText";
  font-size: 17px;
  font-weight: 300;
  padding-top: 10px;
}

.card h3 {
  font-size: 12px;
  color: #6e6e73;
  padding-bottom: 12.8px;
  display: block;
  font-weight: 400;
}

.card span {
  font-size: 28px;
  font-weight: 600;
  color: #1d1d1f;
  display: block;
  letter-spacing: 0.007em;
  line-height: 1.14286;
  font-family: "SFProDisplay";
}

.card-sm {
  width: 313px;
  height: 500px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
  padding: 30px;
}

.img-cont {
  padding-top: 41px;
}

.img-cont img {
  display: block;
  margin: 0 auto 0 auto;
}

.content {
  position: relative;
  display: flex;
  padding-top: 20px;
  flex-direction: column;
  height: 149px;
  box-sizing: content-box;
}

.swatch {
  display: block;
  width: 100%;
  padding: 19px 0px 14px;
  position: absolute;
}

.swatch img {
  height: 12px;
}

.swatch ul {
  display: flex;
  gap: 7px;
  width: fit-content;
}

.swatch ul li span {
  font-size: 12px;
  display: block;
  font-weight: 300;
}

.content .label {
  color: #bf4800;
  font-size: 12px;
  margin-top: 41px;
  position: absolute;
  width: 100%;
  display: block;
}

.content .product {
  color: #1d1d1f;
  font-size: 17px;
  font-weight: 600;
  padding-top: 62px;
  letter-spacing: -0.022em;
}

.content .product span {
  display: block;
}

.content .price {
  font-size: 14px;
  font-weight: 100;
  line-height: 1.28577;
  margin-top: auto;
}

.custom-text {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.more__container {
  padding-left: 231px;
}

.more__slider {
  width: 167%;
  display: flex;
  gap: 20px;
  padding: 24px 0px 40px 0px;
}

.more__card {
  width: 480px;
  height: 500px;
  background-color: #fff;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 15px;
}

.more__card--subtitle,
.group__card--subtitle {
  font-size: 12px;
  color: #6e6e73;
  line-height: 1.33337;
  font-weight: 600;
  padding-bottom: 12.8px;
}

.more__content {
  padding: 30px;
}

.more__card--title,
.group__card--title {
  color: #1d1d1f;
  font-family: "SFProDisplay";
  font-size: 28px;
  display: inline-block;
  width: 340px;
}

.more__card,
.group__card {
  background: #fff;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.more__card--0 {
  background: url(./assets/img/store-card-50-todayatapple-202108.webp), #fff;
}

.more__card--1 {
  background: url(./assets/img/apple-tv.webp), #fff;
}

.more__card--2 {
  background: url(./assets/img/apple-pay.webp), #fff;
}

.more__card--3 {
  background: url(./assets/img/homekit.webp), #fff;
}

/*GROUP SLIDER*/
.group__container {
  padding-left: 231px;
  padding-bottom: 54px;
}

.group__card {
  width: 400px;
  height: 500px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 30px;
}

.group__slider {
  display: flex;
  gap: 20px;
  padding: 24px 0px 40px 0px;
}

.group__card--darkmode {
  color: #fff;
}

.group__card--4 .group__card--title {
  text-align: left;
}

.group__card--0 {
  background: url(./assets/img/store-card-40-edu-202108.webp);
}

.group__card--1 {
  background: url(./assets/img/store-card-40-small-business-202108.webp);
}

.group__card--2 {
  background: url(./assets/img/store-card-40-gov-202108.webp);
}

.group__card--3 {
  background: url(./assets/img/store-card-40-veterans-202203.webp);
}

.group__card--4 {
  background: url(./assets/img/store-card-40-refurb-202108.webp);
}

/* QUICK LINKS */
.quicklinks__container {
  margin: 0 231px;
  padding-bottom: 27px;
}

.quicklinks__title h2 {
  color: #1d1d1f;
  font-size: 28px;
  display: block;
  padding-bottom: 20px;
}

.quicklinks__links ul {
  display: inline-block;
  padding: 0;
}

.quicklinks__links ul li {
  display: inline-block;
  padding-right: 8px;
  padding-bottom: 10px;
}

.quicklinks__links ul li a {
  font-size: 14px;
  font-family: "SFProText";
  padding: 8px 16px;
  background: #e8e8ed;
  border-radius: 980px;
  font-weight: 400;
}

.quicklinks__links ul li a:hover {
  background: #ebebf0;
}

/*QUICK LINKS*/
/*FOOTER NOTES*/
.footernotes__container {
  margin: 0 231px;
}

.footernotes__content {
  padding-bottom: 17px;
  border-bottom: 1px solid #d2d2d7;
}

.footernotes__content p {
  font-size: 12px;
  color: #6e6e73;
  line-height: 1.33337;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-bottom: 4px;
}

.footernotes__link {
  color: #6e6e73;
}

/*FOOTER NOTES*/
/*FOOTER LINKS*/
.footerlinks__container {
  margin: 0 231px;
  padding: 17px 0px 0px 0px;
}

.footerlinks__logo {
  margin-right: 11px;
}

.footerlinks__mainhome ol {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 17px 0px;
}

.footerlinks__mainhome ol li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  color: #424245;
}

.footerlinks__secondary {
  display: flex;
  height: 414.31px;
}

.footerlinks__shop ul {
  padding: 0;
}

.footerlinks__vertical ul {
  display: block;
  width: 196px;
}

.footerlinks__vertical ul li:last-child {
  margin: 0;
}

.footerlinks__education,
.footerlinks__healthcare,
.footerlinks__government,
.footerlinks__about,
.footerlinks__account {
  padding-top: 24px;
}

.footerlinks__vertical ul li {
  font-size: 12px;
  color: #424245;
  font-weight: 300;
  margin-bottom: 9.6px;
}

.footerlinks__vertical ul .footerlinks__linklabel {
  font-weight: 600;
  color: #1d1d1f;
  margin: 0px 20px 9.6px 0px;
}

/*FOOTER LINKS*/
.footerlinks__mini {
  padding-top: 34px;
  padding-bottom: 21px;
}

.footerlinks__moreways {
  margin-bottom: 7px;
  padding-bottom: 8px;
  font-size: 12px;
  color: #6e6e73;
  border-bottom: 1px solid #d2d2d7;
}

.footerlinks__bluelink {
  color: #06c;
}

.footerlinks__copy {
  font-size: 12px;
  display: flex;
  color: #6e6e73;
}

.footerlinks__copyLinks {
  font-size: 12px;
  display: flex;
  width: fit-content;
}

.footerlinks__copyLinksA {
  color: #424245;
  margin: 5px 7px 0px 0px;
  padding: 0px 10px 0px 0px;
  border-right: 1px solid #d2d2d7;
}

.footerlinks__country {
  margin: 0pc 0px 0px auto;
}

.footerlinks__country a {
  color: #424245;
}

/*# sourceMappingURL=style.css.map */