/*-----------------------------------*\
  #main.css
\*-----------------------------------*/

/**
 * copyright 2023 DuoDevs
 */





/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * COLORS
   */

  /* Background Color */
  --white: hsla(0, 0%, 100%, 1);
  --white-2: hsla(0, 0%, 99%, 1);
  --floral-white: hsla(50, 43%, 95%, 1);
  --apple-green: hsla(78, 100%, 35%, 1);
  --apple-green-alpha: hsla(78, 100%, 35%, 0.721);
  --gray: hsla(0, 0%, 49%, 1);
  --rich-black: hsla(188, 63%, 7%, 1);
  --azure-web: hsl(180, 19%, 85%);

  /* Text Color */
  --selective-yellow: hsla(43, 100%, 50%, 1);
  --black: hsla(0, 0%, 0%, 1);
  --sea-green: hsl(188, 63%, 7%);

  /* Border Color */
  --antiflash-white: hsla(0, 0%, 93%, 1);
  --antiflash-white-3: hsla(207, 21%, 92%, 1);
  --alice-blue: hsla(206, 35%, 92%, 1);
  --platinum: hsla(0, 0%, 87%, 1);
  --dim-gray: hsla(188, 8%, 37%, 1);
  --delft-blue: hsla(220, 46%, 25%, 1);

  /* Box Shadow */
  --shadow-1: 0 16px 32px 0 rgba(7, 28, 31, 0.1);
  --shadow-2: 0 1px 6px 0 rgba(54, 56, 61, 0.15);
  --shadow-3: 0 16px 32px 0 rgba(7, 28, 31, 0.1);

  /**
   * TYPOGRAPHY
   */

  /* Font Family */
   --fontFamily_Open_Sans_sans-serif: 'Open Sans', sans-serif;
   --fontFamily_Rajdhani_sans-serif: 'Rajdhani', sans-serif;

  /* Font Size */
   --fs-56: 5.6rem;
   --fs-30: 3.0rem;
   --fs-24: 2.4rem;
   --fs-26: 2.6rem;
   --fs-22: 2.2rem;
   --fs-18: 1.8rem;
   --fs-17: 1.7rem;
   --fs-16: 1.6rem;
   --fs-15: 1.5rem;
   --fs-14: 1.4rem;
   --fs-12: 1.2rem;
   --fs-13: 1.3rem;
   --fs-11: 1.1rem;
   --fs-10: 1.0rem;

  /* Line Height */
   --lineHeight-1: 1;
   --lineHeight-13: 1.3;
   --lineHeight-18: 1.8;

  /* Font Weight */
   --weight-semiBold: 600;
   --weight-bold: 700;


  /**
   * BORDER RADIUS
   */

  --radius-circle: 50%;
  --radius-leaf: 15px 0px 15px 0px;



  /**
   * SECTION SAPCING
   */

  --section-padding-1: 115px 70px;
  --section-padding-2: 100px;
  


  /**
   * TRANSITION
   */

  --transition-1: all 0.3s ease 0s;
  --transition-2: all 0.5s ease 0s;


  /**
   * HEADER HEIGHT
   */

  --header-height: 220px;



}







/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li { list-style: none; }

a,
span,
input,
button,
ion-icon {
  display: block;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  height: auto;
}

address { font-style: normal; }

input,
button {
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

input { outline: none; }

ion-icon { pointer-events: none; }

html {
  font-family: var(--fontFamily_Open_Sans_sans-serif);
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  position: relative;
  background-color: var(--white);
  color: var(--rich-black);
  font-family: var(--fontFamily_Open_Sans_sans-serif);
  font-size: 1.6rem;
  line-height: var(--lineHeight-18);
  overflow-x: hidden;
}

::selection {
  background-color: var(--apple-green-alpha);
  color: var(--white);
}







/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.section:not(.feature, .contact) { contain: content; }

.section .container { 
  padding-block: var(--section-padding-1); 
  padding-inline: 15px;
}

.h1,
.h2,
.h3,
.h4 { font-family: var(--fontFamily_Rajdhani_sans-serif); }

.h1 {
  font-size: var(--fs-30);
  line-height: var(--lineHeight-1);
  margin-block: 20px;
}

.h2 { 
  line-height: var(--lineHeight-1);
  margin-block: 15px;
}

.h4 { font-size: var(--fs-17); }

:is(.hero .section-title, .about .section-title) { text-align: left; }

.section-title { text-align: center; }

.section-subtitle {
  font-family: var(--fontFamily_Rajdhani_sans-serif);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-text {
  position: relative;
  font-size: var(--fs-14);
  padding-inline-start: 15px;
}

.section-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2px;
  background-color: var(--apple-green);
}

.btn {
  position: relative;
  padding: 10px 20px;
  font-family: var(--fontFamily_Rajdhani_sans-serif);
  font-size: var(--fs-14);
  font-weight: var(--weight-semiBold);
  background-color: var(--apple-green);
  color: var(--white);
  border: 1px solid transparent;
  text-transform: uppercase;
  margin-block: 20px;
  overflow: hidden;
  transition: var(--transition-1);
}

.btn .span {
  position: relative;
  transition: var(--transition-1);
  z-index: 2;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--white);
  transform: translateX(-100%);
  transition: var(--transition-1);
  z-index: 1;
}

.btn:is(:hover, :focus-visible).btn::before { transform: translateX(0); }

.btn-primary:is(:hover, :focus-visible) { border-color: var(--black); }

.btn-primary:is(:hover, :focus-visible) .span { color: var(--black); }

.btn-secondary {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

.btn-secondary::before { background-color: var(--apple-green); }

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

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

.slider-list {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 20px;
  padding-block-end: 35px;
  scroll-snap-type: inline mandatory;
  overflow-x: auto;
  transition: var(--transition-1);
}

.slider-list::-webkit-scrollbar { height: 3px; }

.slider-list::-webkit-scrollbar-track { background-color: var(--white); }

.slider-list::-webkit-scrollbar-thumb { background-color: var(--apple-green); }

.slider-list::-webkit-scrollbar-button { min-width: cacl(100% - 30%); }

.slider-item {
  width: 100%;
  min-width: 100%;
  /* scrollbar-gutter: stable; */
  scroll-snap-align: center;
}

.has-before::before {
  width: 100%;
  background-color: var(--apple-green);
  transform: translateX(-100%);
  transition: var(--transition-2);
  animation: scaleX 0.2s ease-in;
}

.w-100 { width: 100%; }





/*-----------------------------------*\
  #TOPBAR
\*-----------------------------------*/

.topbar {
  border-block-end: 1px solid var(--alice-blue);
  padding-block: 8px;
}

:is(.topbar-info, .topbar-info-item, .topbar .wrapper, .languages) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.topbar-info-item { padding-inline: 5px; }

.topbar-info-item { gap: 8px; }

.topbar-info-item ion-icon {
  color: var(--apple-green);
  --ionicon-stroke-width: 45px;
}

.topbar-info-item .span {
  font-size: var(--fs-13);
  font-weight: var(--weight-bold);
  transition: var(--transition-1);
}

:is(.topbar-info-item .span, .languages .span):is(:hover, :focus-visible) { color: var(--apple-green); }

.wrapper {
  gap: 30px;
  margin-block-start: 10px;
}

.languages .span {
  position: relative;
  font-size: var(--fs-13);
  font-weight: var(--weight-bold);
  transition: var(--transition-1);
}

.languages ion-icon { color: var(--apple-green); }

.social-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
}

.social-item { transition: var(--transition-1); }

.social-wrapper .social-item:hover {
  color: var(--apple-green);
  cursor: pointer;
}





/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header {
  position: absolute;
  top: auto;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--white);
  transition: var(--transition-1);
  z-index: 10;
}

.header .container,
.header .title-wrapper {
  display: grid;
  place-items: center;
  padding: 22px 15px;
}

.logo .img { margin: 10px 0 30px; }

.header-btn { display: none; }

.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.icon-box,
.nav-open-btn {
  padding: 15px 15px;
  background-color: var(--white);
  box-shadow: var(--shadow-1);
  color: var(--sea-green);
  font-size: var(--fs-22);
  --ionicon-stroke-width: 40px;
  transition: var(--transition-1);
  position: relative;
}

.icon-box .span {
  position: absolute;
  top: 9px;
  right: 6px;
  font-size: var(--fs-13);
  font-weight: var(--weight-semiBold);
}

.nav-open-btn .span {
  height: 2px;
  width: 17px;
  margin-block-end: 4px;
  background-color: var(--sea-green);
}

.nav-open-btn:last-child{ margin-block-end: 0; }

.icon-box:hover,
.nav-icon-box:hover {
  background-color: var(--apple-green);
  color: var(--white);
}

.search-close { display: none; }

.search-close.active {
  display: block;
  font-size: inherit;
}





/* --------------------------------- *\
   #NAVBAR
\* --------------------------------- */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 300px;
  height: 100vh;
  transform: translateX(-300px);
  transition: var(--transition-2);
  background-color: var(--white);
  padding: 50px 20px;
  z-index: 10;
  opacity: 0;
}

.navbar.active {
  transform: translateX(0);
  opacity: 1;
}

.navbar .container {
  display: block;
  padding-block-start: 5px;
  padding-inline: 0 20px;
  overflow-y: auto;
  height: 100%;
}

.navbar .container::-webkit-scrollbar { width: 2px; }

.navbar .container::-webkit-scrollbar-thumb { background-color: var(--platinum); }

.nav-logo-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-block-end: 1px solid var(--antiflash-white);
  margin-block-end: 35px;
  padding-block-end: 15px;
}

.navbar .logo { margin-block-end: 40px; }

.navbar .logo-dark { padding-block-end: 15px;}

.nav-close-btn { padding-inline: 15px; }
.nav-close-btn ion-icon {
  font-size: var(--fs-22);
  --ionicon-stroke-width: 40px;
}

.input-wrapper {
  position: relative;
  margin-inline-start: 2px;
}

.navbar .input-wrapper ion-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  --ionicon-stroke-width: 60px;
  font-size: var(--fs-15);
}

.input-field {
  padding: 16px 20px;
  width: 100%;
}

.input-field::placeholder {
  color: var(--black);
  font-size: var(--fs-14);
}

.input-field:focus { outline: 1px solid var(--apple-green); }

.navbar-list { margin-block: 40px; }

.navbar-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 16px;
  text-transform: uppercase;
  font-size: var(--fs-14);
  transition: var(--transition-1);
}

.navbar-link ion-icon {
  font-size: var(--fs-16);
  --ionicon-stroke-width: 45px;
  color: var(--gray);
}

.navbar-link:is(:hover, :focus-visible) { color: var(--apple-green); }

.navbar-action {
  display: grid;
  gap: 20px;
  padding-block: 16px;
  border-block: 2px solid var(--antiflash-white-3);
}

.navbar-action-link {
	display: flex;
	align-items: center;
	gap: 20px;
  font-size: var(--fs-14);
  --ionicon-stroke-width: 30px;
  transition: var(--transition-1);
}

.navbar-action-link:hover { color: var(--apple-green); }

.action-box {
  position: relative;
	padding: 15px;
	border: 2px solid var(--antiflash-white-3);
}

.action-box .span {
  position: absolute;
  top: 9px;
  right: 6px;
  font-size: var(--fs-12);
}

.action-box ion-icon { font-size: var(--fs-18); }

.nav-icon-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-block-start: 50px;
}

.nav-icon-box {
  padding: 12px;
  background-color: var(--floral-white);
  transition: var(--transition-1);
}

.overlay { 
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--black);
  z-index: 5;
  display: none;
  opacity: 0; 
}

.overlay.active {
  display: block;
  opacity: 0.5;
}





/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.home { margin-block-start: var(--header-height); }

.hero { background-color: var(--floral-white); }

.hero .container {
  padding-block: var(--section-padding-2);
  display: grid;
  gap: 50px;
}

.section-subtitle .img { margin-block-start: -8px; }

.hero .section-text::before {
  background-color: var(--dim-gray);
  width: 1px;
}







/*-----------------------------------*\
  #FEATURES
\*-----------------------------------*/

.feature .container { padding-block-end: 0; }

.feature-list {
  display: grid;
  background-color: var(--white-2);
  border: 1px solid var(--alice-blue);
}

.feature-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 40px 30px 37px;
}

.feature-card-banner .img {
  height: 50px;
  width: 50px;
}

.feature-card .card-title {
  margin-block-end: 5px;
  line-height: var(--lineHeight-1);
}

.feature-card .card-text { font-size: var(--fs-15); }







/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.about .container {
  padding-block-end: 120px;
  display: grid;
  gap: 40px;
}

.about-content .section-subtitle {
  color: var(--apple-green);
  font-size: var(--fs-14);
  line-height: 1;
}

.about-content .section-text { margin-block-end: 40px; }

.about-content .span { 
  font-size: var(--fs-14);
  margin-block-end: 20px;
}

.about-author {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}

.author-subtitle { font-size: var(--fs-11); }







/*-----------------------------------*\
  #CATEGORIES
\*-----------------------------------*/

.categories {
  background-color: var(--floral-white);
  text-align: center;
}

.categories .container {
  padding-block: 200px;
  padding-block-start: 0;
  padding-inline: 0;
  position: relative;
  max-width: 100%;
}

.categorie-banner {
  height: 357px;
  width: 100%;
  background-position: top left;
  background-size: cover;
  background-repeat: no-repeat;
}

.categorie-content {
  padding-inline: 15px;
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  max-width: 100%;
}

.categorie-content .section-title {
  color: var(--white);
  margin-block-start: 0;
}

.categorie-list { margin-block-start: 40px; }

.categorie-card {
  position: relative;
  padding: 30px 0px 5px;
  background-color: var(--white);
  border: 1px solid var(--platinum);
  overflow: hidden;
}

.categorie-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
}

.categorie-card:is(:hover, :focus-visible).categorie-card::before { transform: translateX(0); }

.categorie-card-banner {
  height: 100px;
  width: 100px;
  margin-inline: auto;
}

.categorie-card .card-content { padding: 15px 20px 5px; }

.categorie-data {
  font-family: var(--fontFamily_Rajdhani_sans-serif);
  font-size: var(--fs-14);
  font-weight: var(--weight-bold);
  margin-block-end: 15px;
}







/*-----------------------------------*\
  #PRODUCTS
\*-----------------------------------*/

.product-navbar-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-block: 40px 50px;
}

.product-nav-item { position: relative; }

.product-nav-item:not(:last-child)::before {
  position: absolute;
  content: "";
  right: 0;
  top: 50%;
  transform: translateY(-90%);
  height: 15px;
  width: 2px;
  background-color: var(--azure-web);
}

.product-nav-link {
  margin: 0 5px 10px 0;
  padding: 15px 25px;
  max-width: max-content;
  font-size: var(--fs-14);
  font-weight: 700;
  text-transform: uppercase;
  border-block-end: 2px solid transparent;
  transition: var(--transition-1);
}

.product-nav-link:is(:focus, :focus-visible, .active) {
  color: var(--apple-green);
  border-color: var(--apple-green);
}

.product-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 10px;
}

.product-card { border: 1px solid var(--floral-white); }

.product-card:is(:hover, :focus-visible) { box-shadow: var(--shadow-1); }

.product-card,
.card-banner-box { position: relative; }

.product-card:is(:hover, :focus-visible) .product-action-link {
  opacity: 1;
  transform: translateY(0);
}

.product-action-list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.product-action-link {
  padding: 10px;
  background-color: var(--white);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(10px);
  transition: var(--transition-1);
}

.product-action-link:is(:hover, :focus-visible) {
  background-color: var(--apple-green);
  color: var(--white);
}

.product-card .card-content {
  padding: 25px 5px 15px;
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--white);
  background-color: var(--apple-green);
  font-size: var(--fs-10);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  padding: 0 10px;
  border-radius: var(--radius-leaf);
}

.rating-wrapper,
.price-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-13);
}

.rating-wrapper { margin-block-end: 5px; }

.rating-wrapper ion-icon { color: var(--selective-yellow); }

.rating-data {
  color: var(--apple-green);
  cursor: context-menu;
}

.product-card .card-title {
  font-size: var(--fs-14);
}

.price-wrapper {
  gap: 10px;
  color: var(--apple-green);
  font-weight: var(--weight-bold);
}

.price { font-size: var(--fs-14); }

.strike { opacity: 0.6; }





/*-----------------------------------*\
  #STATS
\*-----------------------------------*/

.states {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  text-align: center;
}

.states::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--rich-black);
  opacity: 0.7;
}

.states-list {
  position: relative;
  z-index: 1;
  color: var(--white);
  display: grid;
  gap: 50px;
  margin-block-end: 50px;
}

.states-card .card-banner {
  margin-inline: auto;
  margin-block-end: 20px;
  height: auto;
  width: 60px;
}

.states-card-title {
  font-size: var(--fs-56);
  line-height: var(--lineHeight-13);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
}

.states-card-title .span {
  font-size: var(--fs-30);
  margin-block-end: 15px;
}

.states-subtitle {
  font-size: var(--fs-14);
  font-weight: var(--weight-bold);
}



/* #FETARUED PRODUCTS */

.feature-product .section-title { margin-block-end: 55px; }




/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

.contact {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

.contact .img-holder { display: none; }

.contact-content { text-align: center; }

.contact-subtitle {
  color: var(--apple-green);
  font-size: var(--fs-14);
  font-weight: var(--weight-bold);
  font-family: var(--fontFamily_Rajdhani_sans-serif);
}

.contact .section-title { color: var(--white); }

.contact-btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}







/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/

.blog .section-title { margin-block-end: 40px; }

.blog-card {
  box-shadow: var(--shadow-1);
  overflow: hidden;
  height: 100%;
}

.blog-card:is(:hover, :focus-visible) .card-banner .img-cover { transform: scale(1.1); }

.blog-card .card-banner .img-cover { transition: var(--transition-1); }

.blog-card .card-content { padding: 30px; }

.blog-meta-list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-author {
  font-size: var(--fs-12);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: var(--transition-1);
}

.blog-author:hover { color: var(--apple-green); } 

.blog-author ion-icon,
.blog-wrapper ion-icon {
  color: var(--apple-green);
  --ionicon-stroke-width: 40px;
  font-size: var(--fs-13);
}

.blog-author .span {
  font-family: var(--fontFamily_Rajdhani_sans-serif);
  font-weight: var(--weight-bold);
}

.blog-card .card-title {
  margin-block: 20px;
  transition: var(--transition-1);
  cursor: pointer;
}

.blog-card .card-title:is(:hover, :focus-visible) { color: var(--apple-green); }

.blog-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fontFamily_Rajdhani_sans-serif);
  font-size: var(--fs-12);
  border-block-start: 1px solid hsl(207, 22%, 92%);
  padding-block-start: 20px;
}

.date {
  display: flex;
  align-items: center;
  gap: 5px;
}

.detail-btn {
  color: var(--apple-green);
  font-size: var(--fs-14);
  font-weight: var(--weight-semiBold);
  text-transform: uppercase;
}






/*-----------------------------------*\
  #SERVICE
\*-----------------------------------*/

.service-list {
  display: grid;
  margin-inline: 15px;
  box-shadow: var(--shadow-3);
}

.service-card {
  position: relative;
  padding: 40px 27px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.service-card .card-banner {
  height: auto;
  min-width: 30px;
}

.service-card .card-text {
  font-size: var(--fs-15);
  padding-block-end: 22px;
}





/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
  background-color: var(--rich-black);
  color: var(--white);
}

.footer-top {
  display: grid;
  gap: 60px;
  padding-block: var(--section-padding-2);
  padding-inline: 25px;
  border-block-end: 1px solid var(--delft-blue);
}

.footer-brand .logo .img { margin-block-end: 15px; }

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

.footer-address-link {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  margin-block-end: 5px;
  font-size: var(--fs-14);
}

.footer-address-link ion-icon {
  font-size: var(--fs-17);
  margin-block-start: 6px;
}

.footer-address-link .span { transition: var(--transition-1); }

.footer-address-link:is(:hover, :focus-visible) .span { color: var(--apple-green); }

.footer-social-list {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-block-start: 20px;
}

.footer-social-item { cursor: pointer; }

.footer-list-title {
  font-family: var(--fontFamily_Rajdhani_sans-serif);
  font-size: var(--fs-22);
  margin-block-end: 20px;
}

.footer-link {
  position: relative;
  font-size: var(--fs-14);
  margin-block: 10px;
  transition: var(--transition-1);
}

.footer-link::before {
  content: "//";
  position: absolute;
  top: 0;
  left: -20px;
  color: var(--apple-green);
  opacity: 0;
}

.footer-link:is(:hover, :focus-visible) {
  transform: translateX(25px);
  color: var(--apple-green);
}

.footer-link:is(:hover, :focus-visible).footer-link::before { opacity: 1; }

.footer-widget .input-field {
  background-color: var(--white);
  margin-block-end: 20px;
  color: var(--black);
  font-size: var(--fs-15);
}

.location-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50px;
  background-color: var(--apple-green);
  display: grid;
  place-items: center;
  transition: var(--transition-1);
}

.location-btn:is(:hover, :focus-visible) { background-color: var(--rich-black); }

.footer-widget .span {
  font-family: var(--fontFamily_Rajdhani_sans-serif);
  font-size: var(--fs-15);
  font-weight: var(--weight-bold);
  margin-block-end: 10px;
}


/* FOOTER BOTTOM */

.footer-bottom {
  padding: 25px;
  text-align: center;
}

.copyright { font-size: var(--fs-14); }

.footer-bottom-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-block-start: 20px;
}

.footer-bottom-link {
  font-size: var(--fs-13);
  font-weight: var(--weight-bold);
  font-family: var(--fontFamily_Rajdhani_sans-serif);
  transition: var(--transition-1);
}

.footer-bottom-link:is(:hover, :focus-visible) { color: var(--apple-green); }





/*-----------------------------------*\
  #GO TO TOP
\*-----------------------------------*/

.back-top-btn {
  position: fixed;
  bottom: 45px;
  right: 20px;
  padding: 8px;
  max-width: max-content;
  background-color: var(--gray);
  transform: translateY(-5px) rotate(45deg);
  transition: var(--transition-1);
  z-index: 10;
  opacity: 0;
}

.back-top-btn ion-icon {
  transform: rotate(-45deg);
  --ionicon-stroke-width: 45px;
}

.back-top-btn.active {
  opacity: 1;
  transform: translateY(0) rotate(45deg);
}

.back-top-btn:is(:hover, :focus-visible) {
  background-color: var(--apple-green);
  color: var(--white);
}







/*-----------------------------------*\
  #RESPONSIVE
\*-----------------------------------*/

/**
 * responsive for larger than 550px screen
 */

@media (min-width: 550px) {


  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * TYPOGRAPHY
     */

    /* font size */
    --fs-24: 3rem;

  }




  /**
   * REUSED STYLE
   */

   .section .container {
    max-width: 540px;
    margin-inline: auto;
  }

  .btn { margin-block-start: 40px; }

  .section-title { font-size: var(--fs-24); }




  /**
   * TOPBAR & HEADER
   */

  .header .container { padding-block-end: 42px; }

  .topbar-info-item { padding-inline: 12px; }

  .languages { margin-inline-start: 35px; }



  /**
   * NAVBAR
   */

  .navbar {
    max-width: 395px;
    transform: translateX(-395px);
    padding-inline: 40px;
  }


  
  /**
   * FEATURE
   */

  .feature-list {
    max-width: 540px;
    display: grid;
    place-content: center;
  }



  /**
   * CATEGORIES
   */

  .categories .container {
    padding-inline: 0;
    max-width: 100%;
  }

  .categorie-banner { height: 340px; }

  .categorie-item { min-width: calc(100% - 53%); }



  /**
   * STATES
   */

  .states-list { grid-template-columns: 1fr 1fr; }

  /**
   * footer
   */

  .footer-top { grid-template-columns: 1fr 1fr; }

  .footer-widget { grid-column: 1 / 3; }

  .footer-widget img { width: 350px; }


}





/**
 * responsive for larger than 765px screen
 */

@media (min-width: 765px) {


  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * TYPOGRAPHY
     */

    /* font size */
    --fs-24: 4.0rem;
    --fs-17: 1.8rem;
    --fs-13: 1.4rem;
    --fs-12: 1.4rem;

    /**
     * HEADER HEIGHT
     */

    --header-height: 140px;

  }




  /**
   * REUSED STYLE
   */

  .section .container {
    max-width: 765px;
    padding-inline: 25px;
  }

  .section-subtitle { gap: 5px; }

  :is(.feature-list, .service-list) { grid-template-columns: 1fr 1fr; }

  .btn {
    font-size: var(--fs-16);
    padding: 10px 25px;
  }


  /**
   * HEADER
   */

   .topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 20px;
    max-width: 720px;
    margin-inline: auto;
  }

  .topbar-info { gap: 20px; }

  .topbar-info-item { padding-inline: 0; }

  .wrapper { margin-block-start: 0; }

  .social-wrapper { gap: 16px; }

  .header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 22px;
    max-width: 710px;
    margin-inline: auto;
  }

  .logo .img { margin-block: 0; }

  .navbar .container { display: block; }



  /**
   * HERO & ABOUT
   */

  .hero .container { gap: 30px; }

  .hero-content { max-width: 440px; }

  .about-banner { max-width: 565px; }

  .about-content .section-title { max-width: 290px; }

  .about-content .section-text { max-width: 450px; }


  /**
   * CATEGORIES
   */

  .categories .container {
    max-width: 100%;
    padding-inline: 0;
  }

  .categorie-banner { height: 387px; }

  .categorie-content { padding-inline: 25px; }

  .categorie-list { gap: 28px; }
 
  .categorie-item { min-width: calc(100% - 69%); }



  /**
   * PRODUCT & FEATURE PRODUCT
   */

  .product .container { padding-inline: 40px; }

  .product-list { grid-template-columns: repeat(2, 1fr); }

  .product-card .card-title,
  .price { font-size: var(--fs-16); }

  .card-badge {
    padding: 0px 13px;
    font-size: var(--fs-13);
  }

  .feature-product .product-list {
    grid-template-columns: repeat(3, 1fr);
    margin-block-end: 50px;
  }



  /**
   * STATS
   */

  .states-list { grid-template-columns: repeat(4, 1fr); }

  :is(.feature-list, .service-list) {
    grid-template-columns: 1fr 1fr;
    margin-inline: auto;
    max-width: max-content;
  }



  /**
   * CONTACT & BLOG
   */

  .contact-btn-wrapper { gap: 17px; }

  .blog-item { min-width: calc(100% - 52%); }

  .blog-card .card-title {
    font-size: var(--fs-22);
    line-height: var(--lineHeight-13);
  }



  /**
   * SERVICE
   */

  .service .container { padding-block-end: 120px; }

  
 .service-card-before::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 80px;
  width: 2px;
  background-color: var(--azure-web);
  opacity: 0.4;
}



  /**
   * FOOTER
   */

   .footer-widget { grid-column: 1 / 2; }

   .footer-bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30px 15px;
  }

  .footer-bottom-list { margin-block-start: 0; }

}





/**
 * responsive for larger than 1000px screen
 */

@media (min-width: 1000px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * TYPOGRAPHY
     */

    /* font size */
    /* --fs-22: 2.6rem; */
    --fs-24: 5.6rem;
    --fs-14: 1.6rem;
    --fs-17: 2.0rem;
    --fs-50: 5.0rem;
    --fs-18: 1.8rem;
    --fs-16: 1.6rem;

  }



  /**
   * REUSED STYLE
   */

  .topbar .container,
  .header .container,
  .section .container { max-width: 960px; }

  .section .container { padding-inline: 15px; }

  .contact-subtitle { margin-block-start: -35px; }

  .section-title { font-size: var(--fs-50); }

  :is(.hero .container, .about .container) {
    grid-template-columns: 1fr 1fr; 
  }

  .btn {
    padding: 13px 40px;
    margin-block-start: 30px;
  }


  /**
   * TOPBAR & HEADER
   */

  .topbar-info { gap: 30px; }



  /**
   * HERO
   */

  .hero-content .section-title { font-size: var(--fs-24); }



  /**
   * FEATURE
   */

  .feature-list {
    display: flex;
    flex-wrap: wrap;
  }



  /**
   * ABOUT
   */

  .about .container {
    gap: 60px;
    padding-block: 120px;
  }

  .about-content .section-title {
    max-width: unset;
    padding-inline-end: 85px;
  }


  /**
   * CATEGORIES
   */

  .categories .container {
    margin-inline: 0;
    padding-inline: 0;
    max-width: 100%;
  }

  .categorie-card { padding: 50px 15px 25px; }

  .categorie-card .card-title { font-size: var(--fs-18); }



  /**
   * PRODUCT & FEATURE PRODUCT
   */

  .product-navbar-list { padding-inline: 25px; }

  .product-list { grid-template-columns: repeat(3, 1fr); }

  .feature-product .product-list { grid-template-columns: repeat(4, 1fr); }

  

  /**
   * CONTACT
   */

  .contact .container {
    position: relative;
    display: grid;
    grid-template-columns: 0.8fr 1.1fr  0.8fr;
    align-items: center;
    padding: 115px 0px 40px;
  }

  .contact .img-holder { display: block; }

  .contact-banner-1 { position: relative; }

  .contact-banner-1 {
    top: -17px;
    left: -13px;
    height: 263px;
  }

  .contact-banner-2 {
    position: absolute;
    bottom: 0; 
    right: -13px;
    height: auto;
    width: 275px;
    z-index: 1;
  }

  

  /**
   * BLOG
   */

  .blog-card .card-title { font-size: var(--fs-26); }



  /**
   * FOOTER
   */

  .footer-text { font-size: var(--fs-16); }

  .footer-widget .span {
    margin-block: 30px 15px;
    font-size: var(--fs-18);
  }

  .footer-social-list { gap: 15px; }

  .footer-widget img {
    height: auto;
    width: 365px;
  }

  .input-field { padding: 20px 20px; }

  .footer-bottom {
    justify-content: space-between;
    margin-inline: 15px;
  }



}





/**
 * responsive for larger than 1200px screen
 */

@media (min-width: 1200px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * HEADER HEIGHT
     */

    --header-height: 104px;

  }


  /**
   * REUSED STYLE
   */

  .topbar .container,
  .header .container,
  .section .container { max-width: 1200px; }

  .section-title { font-size: var(--fs-24); }

  .section-text { padding-inline-start: 30px; }

  .slider-list::-webkit-scrollbar { display: none; }
  


  /**
   * TOPBAR & HEADER
   */

  .header.active {
    position: fixed;
    top: 0;
    animation: fadeInDown 0.3s ease;
  }

  @keyframes fadeInDown {
    from { transform: translateY(-100%); }

    to { transform: translateY(0); }
  }

  .nav-open-btn { display: none; }

  .navbar,
  .navbar-list { all: unset; }

  .logo-dar,
  .nav-close-btn,
  .header .input-wrapper,
  .navbar-action,
  .nav-icon-wrapper { display: none; }

  .navbar .container { padding-inline: 0; }

  .header .container,
  .header .title-wrapper {
    padding: 0;
  }

  .header { padding-inline: 25px; }

  .header .title-wrapper { gap: 55px; }

  .navbar-list,
  .header .title-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navbar-list { gap: 25px; }

  .navbar-link {
    font-family: var(--fontFamily_Rajdhani_sans-serif);
    text-transform: capitalize;
    padding-block: 0;
  }

  .navbar-link ion-icon {
    font-size: var(--fs-10);
    color: inherit;
  }

  .navbar-link:is(:hover, :focus-visible).navbar-link ion-icon { color: var(--apple-green); }

  .nav-logo-wrapper { display: none; }

  .header-btn {
    display: block;
    padding: 12px 30px;
  }

  .header-btn::before { display: none; }

  .header-btn:is(:hover, :focus-visible) { background-color: hsl(78, 96%, 30%); }


  /**
   * HOME & FEATURE
   */

  .home { position: relative; }

  .hero {
    position: relative;
    height: 525px;
  }

  .hero-banner {
    width: 500px;
    position: absolute;
    bottom: 0;
    right: 60px;
  }

  .hero-content .section-title { font-size: var(--fs-50); }

  .feature .container {
    padding: 0;
    position: absolute;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .feature-list { min-width: 1200px; }


  /**
   * ABOUT & CATEGORIES
   */

  .about .container { margin-block-start: 70px; }

  .categorie-item { min-width: calc(100% - 77%); }

  .categories .container { max-width: 100%; }

  .categorie-banner .img-cover { height: 616px; }

  .categorie-card { padding: 50px 35px 25px; }


  /**
   * PRODUCT & FEATURE PRODUCTS
   */

  .product-list { grid-template-columns: repeat(4, 1fr); }

  .feature-product .product-list { grid-template-columns: repeat(5, 1fr); }

  .product-action-link { padding: 16px; }

  :is(.price, .strike) { font-size: var(--fs-17); }

  
  /* STATES */

  .states-card-title { --fs-56: 7.2rem; }


  /**
   * CONTACT
   */

  .contact .container {
    padding-block: 20px;
    max-width: 1300px;
  }

  .contact-banner-1 {
    width: 450px;
    height: auto;
  }

  .contact-banner-2 {
    width: 350px;
    right: -32px;
  }

   
   /**
    * BLOG & SERVICE 
    */

  .blog-list { gap: 24px; }

  .blog-item { min-width: calc(100% - 68%); }

  .service-list { grid-template-columns: repeat(4, 1fr); }


  /**
   * FOOTER
   */

  .footer-top { grid-template-columns: 1fr 0.5fr 0.7fr 0.6fr 0.5fr; }

  .footer-widget { grid-column: unset; }

  .footer-social-list {
    gap: 20px;
    margin-block-start: 30px;
  }

  .location-btn {
    width: 55px;
    font-size: var(--fs-17);
  }

  .footer-widget img { width: 300px; }

  
}





/**
 * responsive for larger than 1400px screen
 */

@media (min-width: 1400px) {


  /**
   * CUSTOM PROPERTY
   */

  :root {

   /* font size */
  --fs-50: 72px;

  }



  /**
   * REUSED STYLE
   */

  .section-title { font-size: var(--fs-50); }



  /**
   * HEADER & TOPBAR
   */

  .header { padding-block: 28px; }

  .logo .img { margin-inline-start: 25px; }

  .header-btn { margin-block: 0; }



  /**
   * HOME & ABOUT
   */

  .hero { height: 800px; }

  .hero-banner {
    width: 710px;
    right: 150px;
    top: 165px;
  }
  
  .hero .container { padding-block: 200px; }

  .hero-content { max-width: 1200px; }

  .hero-content .section-text { padding-inline-end: 100px; } 
  
  .feature-card { gap: 20px; }

  .author-subtitle { font-size: var(--fs-12); }



  /**
   * FEATURE PRODUCT & CONTACT
   */

  .feature-product .product-list { grid-template-columns: repeat(4, 1fr); }

  .contact { overflow: inherit; }

  .contact .container {
    max-width: 1550px;
    padding-block: 0;
  }

  .contact-banner-1 {
    width: 540px;
    top: 0px;
  }

  .contact-banner-2 {
    height: 495px;
    width: auto;
    right: -13px;
  }

  .contact-content { margin-block-start: 50px; }



  /**
   * SERVICE
   */

  .service .container {
    padding-block-start: 0;
    max-width: 1400px;
  }



  /**
   * FOOTER
   */

  .footer-top { padding: 92px 80px 75px; }

  .footer-brand .logo .img { margin-inline: 0; }

  .footer-list { line-height: 2; }

  .input-field::placeholder { font-size: var(--fs-12); }

  .footer-widget img { width: 325px; }

  .footer-bottom { padding: 30px 80px; }


}