/* ===========================
    (Cross-browser)
=========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}



/* ===========================
   Root Variables
=========================== */
:root {
  --clr-primary-900: #28292b;
  --clr-primary-700: #393E46;
  --clr-primary-500: #4d5563;
  --clr-secondary: #929AAB;
  --clr-success: #28A745;
  --clr-danger: #DC3545;
  --clr-warning: #FFC107;
  --clr-white: #F7F7F7;
  --clr-gray:#EEEEEE;
  --clr-black:  #1c1d1e;

  --font-family: 'Arial', sans-serif;
  --line-height: 1.5;

  --spacing-xs: 40px;
  --spacing-sm: 60px;
  --spacing-md: 80px;
  --spacing-lg: 100px;
  --spacing-xl: 120px;

  --transition-fast: 0.2s ;
  --transition-normal: 0.3s ;
  --transition-slow: 0.4s ;

   /* ==== global font size variables ====  */
   --fs-xxs: 12px;
   --fs-xs: 14px;
   --fs-sm: 16px;
   --fs-base: 18px;
   --fs-md: 20px;
   --fs-lg: 22px;
   --fs-xl: 27px;
   --fs-2xl: 32px;
   --fs-3xl: 34px;
   --fs-4xl: 40px;
   --fs-5xl: 60px;
   --fs-6xl: 72px; 

   /* ======= line height ======== */
   --lh-normal: normal;

}

/* =====================
  root variable responsiveness
========================*/

/* Extra Large Monitor (1680px and below) */
@media screen and (max-width: 1680px) {
  :root {
    --fs-base: 17.7px;
    --fs-md: 19.7px;
    --fs-lg: 21.7px;
    --fs-xl: 26.6px;
    --fs-2xl: 31.5px;
    --fs-3xl: 33.7px;
    --fs-4xl: 39px;
    --fs-5xl: 56.58px;
    --fs-6xl: 67.5px;

    --spacing-xs: 37.86px;
    --spacing-sm: 56.43px;
    --spacing-md: 75px;
    --spacing-lg: 93.58px;
    --spacing-xl: 112.86px;
  

  }
}

/* Large Monitor (1480px and below) */
@media screen and (max-width: 1480px) {
  :root {
    --fs-base: 17.4px;
    --fs-md: 19.4px;
    --fs-lg: 21.4px;
    --fs-xl: 26.2px;
    --fs-2xl: 31px;
    --fs-3xl: 33.4px;
    --fs-4xl: 38px;
    --fs-5xl: 53.16px;
    --fs-6xl: 63px;

    --spacing-xs: 35.72px;
    --spacing-sm: 52.86px;
    --spacing-md: 70px;
    --spacing-lg: 87.16px;
    --spacing-xl: 105.72px;

  }
}

/* Small Monitor (1240px and below) */
@media screen and (max-width: 1240px) {
  :root {
    --fs-base: 17.1px;
    --fs-md: 19.1px;
    --fs-lg: 21.1px;
    --fs-xl: 25.8px;
    --fs-2xl: 30.5px;
    --fs-3xl: 33.1px;
    --fs-4xl: 37px;
    --fs-5xl: 49.74px;
    --fs-6xl: 58.5px;

    --spacing-xs: 33.58px;
    --spacing-sm: 49.29px;
    --spacing-md: 65px;
    --spacing-lg: 80.74px;
    --spacing-xl: 98.58px;

  }
}

/* Tablets (Extra Large, 1023px and below) */
@media screen and (max-width: 1023px) {
  :root {
    --fs-base: 16.8px;
    --fs-md: 18.8px;
    --fs-lg: 20.8px;
    --fs-xl: 25.4px;
    --fs-2xl: 30px;
    --fs-3xl: 32.8px;
    --fs-4xl: 36px;
    --fs-5xl: 46.32px;
    --fs-6xl: 54px;

    --spacing-xs: 31.44px;
    --spacing-sm: 45.72px;
    --spacing-md: 60px;
    --spacing-lg: 74.32px;
    --spacing-xl: 91.44px;

  }
}

/* Tablets (Medium, 840px and below) */
@media screen and (max-width: 840px) {
  :root {
    --fs-base: 16.5px;
    --fs-md: 18.5px;
    --fs-lg: 20.5px;
    --fs-xl: 25px;
    --fs-2xl: 29.5px;
    --fs-3xl: 32.5px;
    --fs-4xl: 35px;
    --fs-5xl: 42.9px;
    --fs-6xl: 49.5px;

    --spacing-xs: 29.3px;
    --spacing-sm: 42.15px;
    --spacing-md: 55px;
    --spacing-lg: 67.9px;
    --spacing-xl: 84.3px;

  }
}

/* Phones (Extra Large, 767px and below) */
@media screen and (max-width: 767px) {
  :root {
    --fs-base: 16.2px;
    --fs-md: 18.2px;
    --fs-lg: 20.2px;
    --fs-xl: 24.6px;
    --fs-2xl: 29px;
    --fs-3xl: 32.2px;
    --fs-4xl: 34px;
    --fs-5xl: 39.48px;
    --fs-6xl: 45px;

    --spacing-xs: 27.16px;
    --spacing-sm: 38.58px;
    --spacing-md: 50px;
    --spacing-lg: 61.48px;
    --spacing-xl: 77.16px;

  }
}

/* Phones (Small, Medium, 560px and below) */
@media screen and (max-width: 560px) {
  :root {
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 27px;
    --fs-3xl: 32px;
    --fs-4xl: 34px;
    --fs-5xl: 36px;
    --fs-6xl: 42px;
    
    --spacing-xs: 25px;
    --spacing-sm: 35px;
    --spacing-md: 45px;
    --spacing-lg: 55px;
    --spacing-xl: 70px;
  }
}


/* ===========================
   Utility Classes
=========================== */
/* ======== flex box styles =========== */
.FZ_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }

.flex_column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .flex_row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
  }

  .flex_center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

  .flex_align_center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .flex_align_end{
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}


.flex_justify_center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }

  .flex_justify_between{
    -webkit-box-pack: justify-between;
    -ms-flex-pack: justify-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.flex_grow {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1; 
    flex-grow: 1;
  }

.flex_grow_double {
    -webkit-box-flex: 2;
    -ms-flex-positive: 2; 
    flex-grow: 2;
  }

.flex_shrink {
  -webkit-flex-shrink: 1; 
  -ms-flex: 1 1 auto; 
  flex-shrink: 1;   
}

.flex_shrink_double {
  -webkit-flex-shrink: 2; 
  -ms-flex: 1 2 auto; 
  flex-shrink: 2;   
}

.grid {
    display: -ms-grid;
    display: grid;
  }

/* ======== test utility ======== */
.text-center {
  text-align: center;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-bold {
  font-weight: bold;
}

  
/*======= font sizes ======== */
.fs-xxs {
  font-size: var(--fs-xxs);
  line-height: var(--lh-normal);
}

.fs-xs {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

.fs-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.fs-base {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.fs-md {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.fs-lg {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
}

.fs-xl {
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
}


.fs-2xl {
  font-size: var(--fs-2xl);
  line-height: var(--lh-normal);
}

.fs-3xl {
  font-size: var(--fs-3xl);
  line-height: var(--lh-normal);
}

.fs-4xl {
  font-size: var(--fs-4xl);
  line-height: var(--lh-normal);
}

.fs-5xl {
  font-size: var(--fs-5xl);
  line-height: var(--lh-normal);
}

.fs-6xl {
  font-size: var(--fs-6xl);
  line-height: var(--lh-normal);
}

/* Button Styles */
.FZ_btn {
  position: relative;
  display: inline-block;
  width: auto; 
  height: auto;
  padding: 10px 20px;
  border: none;
  background-color: var(--clr-black);
  color: var(--clr-white);
  font-size: var(--fs-base);
  transition: var(--transition-slow);
  border: 1px solid var(--clr-black);
  z-index: 0;
  overflow: hidden;
}

.FZ_btn::before{
  width: 0%;
  height: 0%;
  position:absolute;
  top: 50%;
  left: 50%;
  content: ''; 
  background-color: var(--clr-white);
  transition: 0.7s;
  z-index: -1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
}

.FZ_btn:hover::before{
  width: 130%;
  height: 400%;
}

.FZ_btn:hover {
  color: var(--clr-black);
  transform: scaleX(1.02);
  transition: transform 0.6s cubic-bezier(0.34, 5.56, 0.64, 1);
}

.FZ_btn.btn_white{
  background-color: var(--clr-gray);
  color: var(--clr-black);
}

.FZ_btn.btn_white{
 border: 1px solid var(--clr-white);
}

.FZ_btn.btn_white::before{
  background-color: var(--clr-black);
}
.FZ_btn.btn_white:hover {
  color: var(--clr-white);
}

.FZ_btn.btn_icon{
  padding-left: 45px;
}

.FZ_btn.btn_icon::after{
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
}

.FZ_btn.icon__phone::after{
  transform: translateY(-53%);
  background-image: url('../media/icon/phone-icon-white.svg');
}


.FZ_btn.icon__phone:hover::after{
  background-image: url('../media/icon/phone-icon-black.svg') !important;
}

.FZ_btn.icon__arrow{
  padding-left: 20px;
  padding-right: 55px;
}

.FZ_btn.icon__arrow::after{
  transform: translateY(-53%);
  left: unset;
  right: 20px;
  width: 29px;
  height: 15px;
  background-image: url('../media/icon/right-arrow-icon.svg');
  object-fit: contain;
  transition: var(--transition-normal);
}

.FZ_btn.icon__arrow:hover::after{
  right: 15px;
  background-image: url('../media/icon/right-arrow-icon-black.svg');
}

/* ===========================
   Browser Compatibility
=========================== */
/* Fix for older versions of Internet Explorer */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  html {
    font-family: 'Arial', sans-serif;
  }
}

/* Fix for Safari */
@supports (-webkit-touch-callout: none) {
  input,
  textarea {
    font-size: inherit;
  }
}

/* Fix for older versions of Firefox */
@-moz-document url-prefix() {
  input[type='number'] {
    appearance: textfield;
  }
}