/* *************** */
/* HEADER */
/* *************** */

.header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 9.6rem;
   padding: 0 4.8em;
   background-color: #ffdf28;
}

.logo {
   height: 4.2rem;
   width: auto;
}

.main-nav__list {
   list-style: none;
   display: flex;
   gap: 8rem;
}

.main-nav__link:link,
.main-nav__link:visited {
   display: inline-block;
   text-decoration: none;
   text-transform: uppercase;
   font-size: 1.8rem;
   font-weight: 500;
   color: inherit;
   padding: 1.2rem 2.4rem;
   transition: all 0.3s;
   border: 2px solid transparent;
}

/* Mobile navigation */
.mobile-nav {
   display: none;
   border: none;
   background: transparent;
   cursor: pointer;
   z-index: 9999;
   transition: 0.4s all;
   color: #000;
}

.mobile-nav__icon {
   width: 4.8rem;
   height: 4.8rem;
}

.mobile-nav__icon--close {
   display: none;
}

/* Sticky navigation */
.sticky .header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 8rem;
   background-color: transparent;
   backdrop-filter: blur(20px);
   z-index: 999;
   box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

.sticky .bg-white {
   background-color: rgba(255, 255, 255, 0.541);
}

.sticky .section-hero {
   margin-top: 9.6rem;
}

/* *************** */
/* HERO SECTION */
/* *************** */

.section-hero {
   background-color: #ffdf28;
   display: grid;
   grid-template-columns: 4fr 3fr;
   padding: 9.6rem 4.8rem 9.6rem 0;
   gap: 4.8rem;
}

.hero__img {
   margin-top: 4.8rem;
}

.hero__description {
   font-size: 2rem;
   line-height: 1.5;
   margin-bottom: 6.4rem;
}

.hero__btns {
   display: flex;
   gap: 1.6rem;
}

/* *************** */
/* FEATURES SECTION */
/* *************** */

.section-features {
   padding: 12.8rem 0 9.6rem;
   background: linear-gradient(to bottom, #ffdf28 0%, #000 35%, #000 100%);
   color: #fff;
}

.subheading--features {
   color: #fff9d4;
}

.features__description {
   font-size: 2rem;
   line-height: 1.7;
   margin-bottom: 9.6rem;
}

.features {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 4.8rem;
}

.feature {
   padding: 2.4rem;
   color: #ffdf28;
}

.feature__icon {
   display: block;
   height: 6.4rem;
   width: 6.4rem;
   padding: 1.6rem;
   stroke: #332d08;
   background-color: #ffdf28;
   border-radius: 50%;
   margin-bottom: 3.2rem;
}

.feature__name {
   font-size: 2.4rem;
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1.6rem;
}

.feature__description {
   font-size: 1.8rem;
   line-height: 1.8;
}

.features__img {
   width: 90%;
   justify-self: end;
}

/* *************** */
/* KEYCHAIN SECTION */
/* *************** */

.section-keychain {
   padding: 9.6rem 0;
}

.keychain__img-box {
   position: relative;
}

.keychain__img-1,
.keychain__img-2 {
   width: 62%;
   position: absolute;
}

.keychain__img-1 {
   top: 0;
   left: 0;
   transform: rotate(-8deg);
}

.keychain__img-2 {
   top: 4.8rem;
   right: 0;
   transform: rotate(5deg);
}

/* *************** */
/* APP SECTION */
/* *************** */

.section-app {
   padding: 9.6rem 0;
}

.app__img-box {
   position: relative;
}

.app__img-box::before {
   content: "";
   background-color: #ffdf28;
   position: absolute;
   border-radius: 50%;
   width: 60%;
   padding-bottom: 60%;
   top: 3%;
   left: 10%;
   z-index: -1;
}

.app__img {
   width: 70%;
}

/* *************** */
/* CUSTOMERS SECTION */
/* *************** */

.section-customers {
   padding: 9.6rem 0;
   background-color: #000;
   color: #fff;
}

.customers__container {
   display: grid;
   grid-template-columns: 42fr 58fr;
   padding: 0 12.8rem;
}

.customers__img {
   width: 100%;
}

.customers__list {
   list-style: none;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: end;
   gap: 2.4rem;
   padding: 8rem 0;
}

.customers__list-item {
   font-size: 3rem;
   text-align: right;
   padding-bottom: 0.4rem;
   border-bottom: 0.3rem solid #fff;
   position: relative;
}

.customers__list-item::before {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 1.6rem;
   height: 1.6rem;
   background-color: #fff;
   border-radius: 50%;
   transform: translate(-50%, calc(50% + 0.15rem));
}

.customers__list-item:nth-child(1) {
   width: 131%;
}

.customers__list-item:nth-child(2) {
   width: 114%;
}

.customers__list-item:nth-child(3) {
   width: 110%;
}

.customers__list-item:nth-child(4) {
   width: 101%;
}

.customers__list-item:nth-child(5) {
   width: 121%;
}

.customers__list-item:nth-child(6) {
   width: 123%;
}

.customers__list-item:nth-child(7) {
   width: 127%;
}

/* *************** */
/* CTA SECTION */
/* *************** */

.section-cta {
   padding: 12.8rem 0;
   background-color: #000;
}

.cta {
   background-color: #ffdf28;
   display: grid;
   grid-template-columns: 2fr 1fr;
}

.cta__logo {
   height: 0.7em;
   width: auto;
}

.cta__text-box {
   padding: 4.8rem;
}

.cta__text {
   font-size: 2rem;
   line-height: 1.7;
   margin-bottom: 9.6rem;
}

.cta__list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 2.4rem;
}

.cta__list-item {
   font-size: 2rem;
   line-height: 1.7;
}

.cta__form {
   margin-top: auto;
   display: flex;
   align-items: center;
   gap: 1.2rem;
}

.cta__label {
   font-size: 1.6rem;
}

.input {
   border: none;
   font-family: inherit;
   font-size: 1.8rem;
   padding: 1.2rem;
   flex-grow: 1;
}

.input::placeholder {
   color: #bbb;
}

.cta__img-box {
   background:
      linear-gradient(to bottom right, rgba(255, 223, 40, 0.35), rgba(255, 223, 40, 0.35)),
      url("../img/cta-keychain.webp");
   background-size: cover;
   background-position: center;
}

/* *************** */
/* FOOTER */
/* *************** */

.footer {
   background-color: #000;
   color: #777;
   font-size: 1.2rem;
   text-align: center;
   padding: 4.8rem 2.4rem;
}