/* -------------------------------------------------------------------------- */
/*                                  css reset                                 */
/* -------------------------------------------------------------------------- */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul {
  margin: 0;
  padding: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  scroll-behavior: smooth;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */
/*                                   global                                   */
/* -------------------------------------------------------------------------- */
@font-face {
  font-family: "Source Sans Pro";
  src: url(./assets/fonts/SourceSansPro-Bold.otf);
  font-weight: 700;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(./assets/fonts/SourceSansPro-Semibold.otf);
  font-weight: 600;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(./assets/fonts/SourceSansPro-Regular.otf);
  font-weight: 400;
}

:root {
  /* --------------------------------- colors --------------------------------- */

  --primary-color-black: #343434;
  --primary-color-grey: #565656;
  --primary-color-green: #65bc47;
  --primary-color-White: #ffffff;

  --Secondary--color-grey: #8d8d8d;
  --Secondary--color-light-grey: #f1f1f1;

  --tertiary-grey-light: #f8f8f8;
  --tertiary-black: #231f20;
  --tertiary-grey: #e8e6e6;

  /* ---------------------------------- sizes --------------------------------- */
  --rem-6: 0.375rem;
  --rem-8: 0.5rem;
  --rem-10: 0.625rem;
  --rem-12: 0.75rem;
  --rem-14: 0.875rem;
  --rem-base: 1rem;
  --rem-18: 1.125rem;
  --rem-20: 1.25rem;
  --rem-22: 1.375rem;
  --rem-24: 1.5rem;
  --rem-26: 1.625rem;
  --rem-28: 1.75rem;
  --rem-30: 1.875rem;
  --rem-32: 2rem;
  --rem-34: 2.125rem;
  --rem-36: 2.25rem;
  --rem-38: 2.375rem;
  --rem-40: 2.5rem;
  --rem-42: 2.625rem;
  --rem-44: 2.75rem;
  --rem-46: 2.875rem;
  --rem-48: 3rem;
  --rem-50: 3.125rem;
  --rem-52: 3.25rem;
  --rem-54: 3.375rem;
  --rem-56: 3.5rem;
  --rem-58: 3.625rem;
  --rem-60: 3.75rem;
  --rem-62: 3.875rem;
  --rem-64: 4rem;
  --rem-66: 4.125rem;
  --rem-68: 4.25rem;
  --rem-70: 4.375rem;
  --rem-72: 4.5rem;
  --rem-74: 4.625rem;
  --rem-76: 4.75rem;
  --rem-78: 4.875rem;
  --rem-80: 5rem;
  --rem-82: 5.125rem;
  --rem-84: 5.25rem;
  --rem-86: 5.375rem;
  --rem-88: 5.5rem;
  --rem-90: 5.625rem;
  --rem-92: 5.75rem;
  --rem-94: 5.875rem;
  --rem-96: 6rem;
  --rem-98: 6.125rem;
  --rem-100: 6.25rem;
  --rem-102: 6.375rem;
  --rem-104: 6.5rem;
  --rem-108: 6.75rem;
  --rem-110: 6.875rem;
  --rem-112: 7rem;
  --rem-114: 7.125rem;
  --rem-116: 7.25rem;
  --rem-118: 7.375rem;
  --rem-120: 7.5rem;
  --rem-122: 7.625rem;
  --rem-124: 7.75rem;

  /* ---------------------------------- fonts --------------------------------- */

  --Source-Sans-Pro: "Source Sans Pro";
  --Roboto: "Roboto";
}

/* -------------------------------------------------------------------------- */
/*                                  utilities                                 */
/* -------------------------------------------------------------------------- */

/* todo:colors start */

/* font color  */

.fnt_clr_primary_color_black {
  color: var(--primary-color-black);
}

.fnt_clr_primary_color_grey {
  color: var(--primary-color-grey);
}

.fnt_clr_primary_color_white {
  color: var(--primary-color-White);
}

.fnt_clr_primary_color_green {
  color: var(--primary-color-green);
}

.fnt_clr_secondary_color_grey {
  color: var(--Secondary--color-grey);
}

.fnt_clr_secondary_color_light_grey {
  color: var(--Secondary--color-light-grey);
}

.fnt_clr_tertiary_grey_light {
  color: var(--tertiary-grey-light);
}

.fnt_clr_tertiary_black {
  color: var(--tertiary-black);
}

.fnt_clr_tertiary_grey {
  color: var(--tertiary-grey);
}

/* bg color  */

.bg_clr_primary_color_black {
  background-color: var(--primary-color-black);
}

.bg_clr_primary_color_grey {
  background-color: var(--primary-color-grey);
}

.bg_clr_primary_color_white {
  background-color: var(--primary-color-White);
}

.bg_clr_primary_color_green {
  background-color: var(--primary-color-green);
}

.bg_clr_secondary_color_grey {
  background-color: var(--Secondary--color-grey);
}

.bg_clr_secondary_color_light_grey {
  background-color: var(--Secondary--color-light-grey);
}

.bg_clr_tertiary_grey_light {
  background-color: var(--tertiary-grey-light);
}

.bg_clr_tertiary_black {
  background-color: var(--tertiary-black);
}

.bg_clr_tertiary_grey {
  background-color: var(--tertiary-grey);
}

/* todo:colors end */

/* todo : fonts starts */

/* Source Sans Pro */

.Source_Sans_Pro_bold_700 {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
}

.Source_Sans_Pro_semiBold_600 {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
}

.Source_Sans_Pro_regular_400 {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
}

/* Roboto */

.Roboto_bold_700 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}

.Roboto_regular_400 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

/* todo : fonts end */

/* todo: test align start */

.t-center {
  text-align: center;
}

.t-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* todo: test align end */

/* todo:button start  */

/* primary button  */

.primary_btn {
  background-color: var(--primary-color-black);
  border-radius: 0.313rem;
  color: var(--primary-color-White);
  line-height: var(--rem-42);
  display: flex;
  gap: var(--rem-10);
  font-weight: 600;
}

.primary_btn:hover {
  background-color: var(--primary-color-green);
  color: var(--primary-color-White);
}

.primary_btn:hover .lineArrow {
  fill: var(--primary-color-White);
}

.primary_btn:active {
  background-color: var(--primary-color-green);
  color: var(--primary-color-White);
  opacity: 0.7;
}

.primary_btn:active .lineArrow {
  fill: var(--text-color-grey);
}

/* secondary button  */
.secondary_btn {
  background-color: transparent;
  display: flex;
  gap: var(--rem-10);
  font-weight: 600;
  padding: 0 !important;
}

.with_black_btn {
  color: var(--primary-color-black);
}

.with_black_btn .lineArrow {
  fill: var(--primary-color-black);
}

.with_green_btn {
  color: var(--primary-color-green);
}

.with_green_btn .lineArrow {
  fill: var(--primary-color-green);
}

/* hover  */

.with_black_btn:hover {
  color: var(--primary-color-green);
}

.with_black_btn:hover .lineArrow {
  fill: var(--primary-color-green);
}

.with_green_btn:hover {
  color: var(--primary-color-White);
}

.with_green_btn:hover .lineArrow {
  fill: var(--primary-color-White);
}

/* active  */

.with_black_btn:active {
  opacity: 0.7;
}

.with_black_btn:active .lineArrow {
  opacity: 0.7;
}

.with_green_btn:hover {
  opacity: 0.7;
}

.with_green_btn:hover .lineArrow {
  opacity: 0.7;
}

/* teritiary_btn */

.teritiary_btn {
  background-color: transparent;
  color: var(--primary-color-black);
  font-weight: 600;
  padding: 0 !important;
}

.teritiary_btn:hover {
  color: var(--primary-color-green);
}

.teritiary_btn:active {
  opacity: 0.7;
}


/* outlinebtn start */

.outline {
  background: var(--primary-color-White);
  color: var(--primary-color-black);
  border: 1px solid var(--primary-color-black);

}

.outline:hover {
  color: var(--primary-color-green);
  border: 1px solid var(--primary-color-green);

}

/* outlinebtn end */

/* todo:button end  */

/* todo:scroll tab start  */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #e7e7e7;
  /* border: 1px solid #cacaca; */
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--text-color-grey);
}

/* todo:scroll tab end  */

/* todo:input syle start  */

input,
textarea {
  color: var(--primary-color-black);
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--Source-Sans-Pro);
}

input {
  /* outline: 1.5px solid var(--text-color-grey); */
  border: 1.5px solid var(--primary-color-grey);
  padding-left: var(--rem-20);
  padding-top: var(--rem-14);
  padding-bottom: var(--rem-14);
  caret-color: var(--primary-color-grey);
  border-radius: var(--rem-10);
}

input:focus-visible {
  border: 1.5px solid var(--primary-color-green);
  outline: transparent;
  border-radius: var(--rem-10);
}

textarea {
  /* outline: 1.5px solid var(--primary-color-grey); */
  border: 1.5px solid var(--primary-color-grey);
  padding-left: var(--rem-20);
  padding-top: var(--rem-14);
  padding-bottom: var(--rem-14);
  caret-color: var(--primary-color-grey);
  border-radius: var(--rem-10);
}

textarea:focus-visible {
  outline: transparent;
  border: 1.5px solid var(--primary-color-green);
}

/* todo:input syle end  */

/* -------------------------------------------------------------------------- */
/*                                   mobile                                   */
/* -------------------------------------------------------------------------- */

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", "Source Sans Pro", sans-serif;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  color: var(--primary-color-black);
}

button:focus-visible {
  outline: none;
}

button {
  font-family: var(--Source-Sans-Pro);
  font-size: var(--rem-14);
  padding: 0.2em 1em;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  border: none;
  white-space: nowrap;
}

a {
  text-decoration: none;
  color: var(--primary-color-grey);
}

a:hover {
  color: var(--primary-color-green);
}

a:active {
  opacity: 0.7;
}

/* -------------------------------------------------------------------------- */
/*                                   mobile                                   */
/* -------------------------------------------------------------------------- */

/* --------------------------------- header --------------------------------- */
.container {
  padding-left: var(--rem-20);
  padding-right: var(--rem-20);
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: transparent;

  z-index: 10;
}

.header.active {
  transition: 200ms ease-in;
  background-color: var(--primary-color-White);
  box-shadow: 0px 8px 4px rgba(141, 141, 141, 0.25);
}

.header_container {
  padding-top: var(--rem-14);
  padding-bottom: var(--rem-14);
}

.header_nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.brand_logo {
  z-index: 20;
  flex-shrink: 0;
}

.brand_header_logo {
  width: 13.875rem;
}

.nav_burger {
  z-index: 20;
}

.burder_icon g {
  stroke: var(--tertiary-black);
}

.header_nav.active .burder_icon g {
  stroke: var(--primary-color-green);
}

.navLink_wraper {
  position: absolute;
  padding-left: var(--rem-20);
  padding-right: var(--rem-20);
  inset: 0;
  padding-top: var(--rem-80);
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: 200ms ease-in;
  transform: translateX(100%);
  background-color: var(--primary-color-White);
}

.header_nav.active .navLink_wraper {
  transform: translateX(0%);
}

.navLink_item {
  border-bottom: 1px solid var(--Secondary--color-light-grey);
  padding-top: 0.313rem;
  padding-bottom: 0.313rem;
}

.navLink_link {
  color: var(--primary-color-black);
  line-height: var(--rem-42);
  font-weight: 600;
  font-family: var(--Source-Sans-Pro);
  font-size: var(--rem-14);
  width: 100%;
  display: block;
  text-transform: uppercase;
}

.navLink_link.active {
  color: var(--primary-color-green);
}

.navLink_link:hover {
  color: var(--primary-color-green);
}

.navLink_link:active {
  color: var(--primary-color-green);
}

.navLink_item {
  position: relative;
}

.navLink_item:hover a svg {
  rotate: 90deg;
  transition: all 0.3s ease-in-out;
}

.ourProducts_link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* submenu  */
.subMenu ul {
  display: none;
}

.subMenu_item {
  /* line-height: var(--rem-42); */
  padding-top: 0;
  padding-left: var(--rem-28);
}

.subMenu_link {
  font-family: var(--Source-Sans-Pro);
  font-weight: 600;
  color: var(--primary-color-black);
}

.subMenu_link:active,
.subMenu_link:hover {
  color: var(--primary-color-green);
}

.subMenu_item:last-child {
  padding-top: var(--rem-10);
  padding-bottom: var(--rem-14);
}

.navLink_item:hover .subMenu ul {
  display: block;
}

.nav_mob_text {
  line-height: var(--rem-24);
  margin-top: var(--rem-28);
  font-size: 1rem;
}

.navLink_Btn {
  margin-top: var(--rem-20);
}

/* --------------------------------- footer --------------------------------- */
.footer_container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.social_links {
  display: flex;
  gap: var(--rem-20);
  justify-content: center;
}

.social_links li:first-child {
  margin-top: 1px;
}

.social_links li a svg {
  flex-shrink: 0;
}

.social_links li a:hover .social_icon_svg {
  fill: var(--primary-color-green);
}

.copyRight {
  margin-top: var(--rem-12);
}

.copyRight p {
  font-size: var(--rem-10);
  line-height: var(--rem-24);
}

/* --------------------------------- cookies -------------------------------- */

.cookies {
  /* width: 20rem; */
  max-width: 27rem;
  position: fixed;
  z-index: 100;
  background-color: var(--primary-color-White);
  padding: var(--rem-20) var(--rem-34);
  border-radius: var(--rem-20);
  display: none;
  transform: translateX(-50%);
  bottom: 5%;
  left: 50%;
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.10);

}

.cooies_icon {
  margin-inline: auto;
}

.cookies_container p {
  font-family: var(--Roboto);
  margin-top: var(--rem-12);
  text-align: center;
  font-size: var(--rem-12);
  line-height: var(--rem-22);
  font-weight: 400;
  color: var(--primary-color-black);
}

.cookies_btn_wrap {
  display: flex;
  gap: var(--rem-12);
  margin-top: 1rem;
  justify-content: center;
}

.cookies_container button {
  display: block;
  width: var(--rem-120);

}

/* -------------------------------------------------------------------------- */
/*                                media queries                               */
/* -------------------------------------------------------------------------- */

/* ? -------------------------------------------------------------------------- */
/* ?                              media query 640px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 40em) {}

/* ? -------------------------------------------------------------------------- */
/* ?                              media query 768px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  .container {
    padding-left: var(--rem-40);
    padding-right: var(--rem-40);
  }

  .brand_header_logo {
    width: 18rem;
  }

  /* --------------------------------- footer --------------------------------- */

  .footer_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .social_links {
    order: 1;
  }

  .copyRight {
    margin-top: unset;
  }

  .copyRight p {
    font-size: var(--rem-12);
  }
}

/* ? -------------------------------------------------------------------------- */
/* ?                             media query 1024px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .container {
    padding-left: var(--rem-60);
    padding-right: var(--rem-60);
  }

  .navLink_wraper {
    padding-left: var(--rem-60);
    padding-right: var(--rem-60);
  }
}

/* ? -------------------------------------------------------------------------- */
/* ?                             media query 1280px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 80em) {
  .hide_lg {
    display: none;
  }

  /* --------------------------------- header --------------------------------- */
  .header_nav {
    align-items: center;
    /* transition: all 0.5s ease-out;
    opacity: 0;
    transform: translateY(100%); */
  }

  .navLink_wraper {
    position: relative;
    flex-direction: row;
    align-items: center;
    transform: translateX(0%);
    height: 100%;
    padding: 0;
    gap: var(--rem-50);
    background-color: transparent;
    transition: none;
  }

  .navLink_item {
    border: unset;
  }

  .navLink_item:hover a svg {
    rotate: 180deg;
  }

  .navLink_link {
    position: relative;
  }

  .navLink_link::after {
    content: "";
    width: 50%;
    height: 0.063rem;
    background-color: var(--primary-color-green);
    position: absolute;
    left: 0;
    bottom: 0.313rem;
    transform-origin: bottom left;
    transform: scaleX(0);
    transition: transform 0.2s ease-out;
  }

  /* .navLink_link:hover::after {
    transform: scaleX(1);
  } */
  .navLink_link.active {
    color: var(--primary-color-green);
  }

  .navLink_link.active::after {
    transform: scaleX(1);
  }

  .ourProducts_link::after {
    content: unset;
  }

  .ourProducts_link {
    position: relative;
    gap: var(--rem-10);
  }

  .ourProducts_link svg {
    transform: rotate(90deg);
  }

  .subMenu {
    position: absolute;
    background-color: transparent;
    padding-top: var(--rem-10);
  }

  .subMenu_item {
    background-color: var(--primary-color-White);
    width: 11.875rem;
    padding-top: var(--rem-14);
    padding-bottom: var(--rem-14);
  }

  .subMenu_item:first-child {
    border-top: 2px solid var(--primary-color-green);
    padding-bottom: 0;
  }

  .subMenu_item:last-child {
    padding-top: var(--rem-10);
  }

  .navLink_Btn {
    margin-top: unset;
  }

  /* --------------------------------- cookies -------------------------------- */
  .cookies {
    padding: var(--rem-30) var(--rem-32);
    transform: none;
    left: auto;
    right: 5%;

  }

  .cookies_container p {
    font-size: var(--rem-14);
  }

  .cookies_btn_wrap {
    margin-top: var(--rem-20);
    gap: var(--rem-20);
  }

}

/* ? -------------------------------------------------------------------------- */
/* ?                             media query 1440px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 90em) {
  .container {
    padding-left: var(--rem-80);
    padding-right: var(--rem-80);
  }
}

/* ? -------------------------------------------------------------------------- */
/* ?                             media query 1536px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 96em) {
  /* .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  } */
}

@media (min-width: 120em) {}

@media (min-width: 125em) {
  .container {
    max-width: 100%;
    margin-left: unset;
    margin-right: unset;
    padding-left: 8%;
    padding-right: 8%;
  }

  html {
    font-size: calc(15px + 0.390625vw);
  }
}