.container{padding-inline: 15px;}
.action-btn.user{display: none;}
.header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff1a2;
  padding-block: 30px;
  z-index: 4;
}

.header.active{
  position: fixed;
  box-shadow: var(--shadow-1);
}

.header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.nav-toggle-btn{
  font-size: 30px;
  transition: var(--transition-1);
}

.nav-toggle-btn.active .menu-icon,
.nav-toggle-btn .close-icon{display: none;}

.nav-toggle-btn .menu-icon,
.nav-toggle-btn.active .close-icon{display: block;}

.logo{
  font-family: var(--ff-carter_one);
  font-size: 3rem;
}

.logo-name img{width: 80px; height: auto;}

.header-actions{
  display: flex;
  gap: 10px;
}

.header .action-btn{
  position: relative;
  font-size: 22px;
  transition: var(--transition-1);
}

.header .btn-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background-color: var(--portland-orange);
  color: var(--white);
  font-size: var(--fs-8);
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50px;
}

.nav-toggle-btn:is(:hover, :focus),
.header .action-btn:is(:hover, :focus){transform: scale(1.1);}

.navbar{
  position: fixed;
  top: 85px;
  left: -320px;
  bottom: 0;
  background-color: var(--white);
  max-width: 320px;
  width: 100%;
  padding: 20px 10px;
  box-shadow: var(--shadow-2);
  transition: 0.25s var(--cubic-out);
  overflow-x: hidden;
  overflow-y: auto;
}

.navbar.active{
  transform: translateX(320px);
  transition-timing-function: var(--cubic-in);
}

.navbar-link{
  color: var(--eerie-black);
  font-size: var(--fs-6);
  padding: 10px 15px;
}

.navbar-action-btn{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-color: #fff1a2;
  color: #f092b5;
  font-weight: var(--fw-700);
  text-transform: uppercase;
  text-align: center;
}
/* ************************** */
.section{padding-block: var(--section-padding);}

.has-bg-img{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

h1, h2, h3{line-height: 1.1;}

.h1{
  color: var(--white);
  font-family: var(--ff-bangers);
  font-size: var(--fs-1);
  font-weight: var(--fw-400);
  letter-spacing: 1px;
}

.h2, .h3{color: var(--eerie-black);}
.h2{font-size: var(--fs-2);}
.h3{font-size: var(--fs-3);}

.btn{
  background-color: var(--black);
  color: var(--white);
  max-width: max-content;
  padding: 8px 25px;
  font-weight: var(--fw-700);
  border-radius: 50px;
  transition: var(--transition-1);
}

.hero .btn{margin: 20px auto;}

.section-title{
  text-align: center;
  margin-block-end: 30px;
}

.section-title .span{
  display: inline;
  color: #f092b5;
}

.img-holder{
  aspect-ratio: var(--width) / var(--height);
  background-color: var(--light-gray);
  overflow: hidden;
}

.img-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.has-scrollbar{
  display: flex;
  align-items: center;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  padding-block-end: 20px;
  margin-block-end: -20px;
}

.scrollbar-item{
  min-width: 100%;
  scroll-snap-align: start;
}

.has-scrollbar::-webkit-scrollbar{height: 10px;}

.has-scrollbar::-webkit-scrollbar-track{
  outline: 2px solid #f092b5;
  border-radius: var(--radius-10);
}

.has-scrollbar::-webkit-scrollbar-thumb{
  border-radius: var(--radius-10);
  background-color: #f092b5;
  border: 2px solid var(--white);
}

.has-scrollbar::-webkit-scrollbar-button{width: calc(25% - 30px);}

.grid-list{
  display: grid;
  gap: 30px;
}

.w-100{width: 100%;}
/* ************************** */
.hero{
  margin-block-start: 85px;
  min-height: 360px;
  background-position: left;
  text-align: center;
}

.hero-title .span{font-size: 0.5em; color: #f092b5;}
.hero-text{color: var(--black); margin-bottom: 15px 20px; font-weight: 700;}
.hero .btn:is(:hover, :focus){background-color: #f092b5;}
/* **********category**************** */
.category-card .card-banner{border-radius: var(--radius-10);}
.category-card .img-cover{transition: var(--transition-2);}
.category-card:is(:hover, :focus-within) .img-cover{transform: scale(1.08);}
.category-card .card-title{
  margin-block-start: 15px;
  text-align: center;
  transition: var(--transition-1);
}
.category-card .card-title:is(:hover, :focus){color: #f092b5;}
/* **********offer**************** */
.offer-card{
  display: grid;
  align-items: center;
  padding: 20px;
  border-radius: var(--radius-10);
}

.offer-card .card-subtitle{
  font-size: var(--fs-7);
  text-transform: uppercase;
  font-weight: var(--fw-700);
}

.offer-card .card-title{
  color: var(--black);
  margin-block: 5px 24px;
}
.offer-card .card-title span{font-size: 28px;}

.grid-list li:nth-child(1) .btn{background: #0eb8d9;}
.grid-list li:nth-child(2) .btn{background: #3c5e15;}
.grid-list li:nth-child(3) .btn{background: #f092b5;}
.grid-list li .btn:hover{background: #000;}

.offer-card .btn{background-color: #f092b5;}
.offer-card .btn:is(:hover, :focus){background-color: var(--black);}
/* **********product**************** */
.product .img-cover.hover,
.product-card .card-action-btn{display: none;}

.product-card{text-align: center;}

.product-card .card-banner{
  border: 1px solid var(--platinum);
  border-radius: var(--radius-10);
  margin-block-end: 20px;
}

.product-card :is(.wrapper, .rating-wrapper){display: flex;}

.product-card .wrapper{
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: var(--silver-chalice);
  font-size: var(--fs-7);
}

.product-card .rating-wrapper{
  color: var(--amber);
  gap: 2px;
}

.product-card .rating-wrapper.gray{color: unset;}

.product-card .h3{
  --fs-3: 1.8rem;
  margin-block: 8px 10px;
}

.product-card .card-title{transition: var(--transition-1);}

.product-card .card-title:is(:hover, :focus){color: #f092b5;}

.product-card .card-price{
  color: var(--portland-orange);
  font-size: var(--fs-4);
  font-weight: var(--fw-700);
}
/* **********service**************** */
.service .img{margin-inline: auto; margin-block-end: 30px;}
.service .section-title{margin-block-end: 60px;}
.service-card{text-align: center;}
.service-card .card-icon{max-width: max-content; margin-inline: auto;}
.service-card .card-title{margin-block: 10px;}
.service-card .card-text{color: var(--spanish-gray);}
/* **********cta**************** */
.cta{
  background-position: 75% center;
  background-repeat: no-repeat;
  background-size: cover;
}
.cta-banner{display: none;}
.cta-content{padding-block: 80px var(--section-padding);}
.cta-content .h2{margin-top: 30px; text-align: left;}
.cta .section-title{margin-block-end: 10px 20px;}
.cta .section-text{margin-block-end: 30px; text-align: justify;}
.cta .btn:is(:hover, :focus){
  background-color: #f092b5;
  color: var(--black);
}
/* **********brand**************** */
.brand{--section-padding: 100px;}
.brand .has-scrollbar{gap: 0;}
.brand .scrollbar-item{min-width: 50%;}
.brand .scrollbar-item:not(:last-child){border-inline-end: 1px solid var(--platinum);}
.brand-card{max-width: max-content; margin-inline: auto;}
/* **********footer**************** */
.footer{
  background-color:  #bee1f0;
  color: var(--onyx);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top;
}

.footer-top{
  padding-block-start: 100px;
  border-block-end: 1px solid var(--onyx);
}

.footer-top .container{
  display: grid;
  gap: 30px;
}

.footer .logo{
  color: var(--black);
  margin-block-end: 10px;
}

.footer-text{
  font-size: var(--fs-6);
  margin-block-end: 25px;
}

.footer-text .link{
  display: inline-block;
  color: #f092b5;
  font-weight: var(--fw-700);
}

.contact-item{
  margin-block-end: 15px;
  color: var(--black);
  font-weight: var(--fw-700);
  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-link, .address{color: var(--black);}

.contact-item ion-icon{
  flex-shrink: 0;
  font-size: 22px;
  color: #f092b5;
}

.social-list{
  display: flex;
  gap: 10px;
}

.social-link{
  background-color: var(--white);
  color: var(--black);
  padding: 12px;
  border-radius: 50%;
  transition: var(--transition-1);
}

.social-link:is(:hover, :focus){
  background-color: #f092b5;
  color: var(--white);
}

.footer-list-title{
  color: var(--black);
  font-size: var(--fs-4);
  font-weight: var(--fw-700);
  padding-block: 10px;
}

.footer-link{
  color: var(--spanish-gray);
  font-weight: 500;
  padding-block: 4px;
  transition: var(--transition-1);
}

.footer-link:is(:hover, :focus){color: #f092b5;}

.footer-bottom{padding-block: 20px;}

.copyright{margin-block-end: 10px;}

.copyright-link{display: inline-block;}

.footer-bottom .img{
  width: 100%;
  max-width: max-content;
}