:root {
  --white: #f5f5f5;
  --extra-white: #fff;
  --extra-black: #000000;


  /*primary*/
  --black: #0a0a0d;
  --black-03: #0a0a0d4d;
  --dark-blue: #0f1014;
  --dark-blue-08: #0f1014cc;
  --dark-blue-06: #0f101499;

  --extra-white-06: #ffffff99;
  --extra-white-08: #ffffffcc;
  --extra-white-opacity-03: #ffffff4d;
  --extra-white-opacity-06: #ffffff99;
  --light-grey: #f3f3f3;

  --green: #70d44b;

  --extra-white: #fff;
  --extra-white-opacity-08: #ffffffcc;







  --dark-grey:   #6F7072;
  /*accent*/
  --accent-red: #f50812;

  --youtube-red: #ff0000;
  --facebook-blue: #0866ff;
  --linkedin-blue: #0366c3;

  --gray: #343840;
  --gray-light: #f3f3f3;

  --grey: #7e808a;
  --active-blue: #065ae2;
  --black-opacity-03: #00000033;
  --black-opacity-05: #00000080;
  --black-opacity-06: #00000099;
  --black-opacity-08: #000000cc;

  --extra-white-opacity-02: #ffffff33;
  --extra-white-opacity-03: #ffffff4d;
  --extra-white-opacity-05: #ffffff80;
  --extra-white-opacity-06: #ffffff99;

  --extra-white-opacity-09: #ffffffe5;
  --extra-white-opacity-15: #ffffff26;

  --tab-border-grey: #d2d2d2;

  --ellipse-gradient: radial-gradient(50% 50% at 50% 50%, #ffffff2e 0%, #ffffff00 100%);
  --ellipse-gradient-light: radial-gradient(50% 50% at 50% 50%, #00000017 0%, #00000000 100%);

  /* --card-dark-text: #45474f; */

  --car-card-footer-top-border: #dbdee3;
  --car-card-content-border-gradient: linear-gradient(246.38deg, #f7081433 0%, #f5081266 100%);
  --car-card-content-gradient: linear-gradient(89.61deg, #ffffff80 0%, #ffffff80 100%);

  --car-card-dark-footer-border: #464b55;

  --card-dark-content-border-gradient: linear-gradient(224.97deg, #51535b 0%, #0e0e0e 100.72%);

  --table-row-grey: #ececec;
  --background-opacity: #ffffff1a;
  --media-icon-grey: #67676c;
  --media-icon-grey-hovered: #adaeb2;

  --background-transparent: #0f10148c;
  --input-placeholder-dark: #0f101466;

  --img-filter-grey: #00000073;
  --gradient-start: #0f101400;
  --gradient-middle: #25262b;
  --gradient-end: #0f1014;

  /* home start */
  --gallery-shadow-block-gradient: linear-gradient(180deg, #000000da 0%, #0000008a 100%);
  --gallery-gradient-blue: radial-gradient(50% 50% at 50% 50%, #0047ba4d 0%, #0047ba00 100%);
  --gallery-gradient-red: radial-gradient(50% 50% at 50% 50%, #f5081245 0%, #f5081200 100%);
  --gallery-gradient-green: radial-gradient(50% 50% at 50% 50%, #70d44b39 0%, #70d44b00 100%);
  --gallery-gradient-white: radial-gradient(50% 50% at 50% 50%, #ffffff3d 0%, #ffffff00 100%);
  /* home end */

  /*our-services start*/

  --after-sales-filter-1-gradient: linear-gradient(270deg, #0f10141a 0%, #0f1014f2 100%);
  --after-sales-filter-2-gradient: linear-gradient(
    0deg,
    var(--gradient-start) 25.4%,
    var(--gradient-end) 100%
  );
  --after-sales-filter-3-gradient: linear-gradient(
    277.04deg,
    var(--gradient-start) 5.5%,
    #0f101499 100%
  );
  --contact-section-filter-1-gradient: linear-gradient(
    180deg,
    var(--gradient-start) 0%,
    #0f101433 100%
  );
  --contact-section-filter-2-gradient: linear-gradient(
    270deg,
    var(--gradient-start) 0%,
    #0f1014e6 100%
  );
  --delivery-section-filter-1-gradient: linear-gradient(
    270deg,
    var(--gradient-start) 0%,
    #0f1014f2 100%
  );
  --delivery-section-filter-2-gradient: linear-gradient(
    0deg,
    var(--gradient-start) 0%,
    var(--gradient-end) 100%
  );
  --delivery-section-filter-3-gradient: linear-gradient(
    277.04deg,
    var(--gradient-start) 5.5%,
    #0f101499 100%
  );

  /*our-services end*/

  /*car-details-start*/
  --car-details-header-filter-1: linear-gradient(
    180deg,
    var(--black-opacity-08) 0%,
    var(--extra-black) 80.49%
  );
  --car-details-header-filter-2: linear-gradient(
    90deg,
    var(--black-opacity-08) 27.94%,
    var(--extra-black) 60.89%
  );

  /*car-details-end*/
  --border-dark-grey: #6d6f78;
  --border-grey: #dbdee3;

  --placeholder-grey: #999ca0;

  --background-grey: #14161b;

  --page-header-filter-bg: #0f1014b3;
  --page-header-filter-gradient: linear-gradient(180deg, #00000066 0%, #00000059 100%);
  --page-header-filter-stock-in-cyprus-gradient: linear-gradient(
    180deg,
    #0000007a 0%,
    #0000006b 100%
  );

  --option-hover-grey: #333333;
  --home-section-gradient: linear-gradient(180deg, #1a1b1e 0%, #0f1014 100%);
  --home-section-gradient-2: linear-gradient(180deg, #0f1014 0%, #14161b 100%);
  --home-section-gradient-3: linear-gradient(180deg, #0f101400 0%, #0f1014bf 100%);

  --home-dealers-gradient: linear-gradient(180deg, #0f101400 0%, #0f101480 100%);
  --home-dealers-gradient-2: linear-gradient(
    270deg,
    var(--gradient-start) 0%,
    var(--gradient-end) 100%
  );

  --gradient-white: linear-gradient(
    89.61deg,
    var(--extra-white-opacity-05) 0%,
    var(--extra-white-opacity-05) 100%
  );

  --options-gradient: linear-gradient(89.61deg, #24252999 0%, #25262d99 100%);
  --options-border-gradient: linear-gradient(66.62deg, #1c1c1c 0%, #37383e 100%);
  --options-border-gradient-light: linear-gradient(31.81deg, #cbcbcb 0%, #ffffff 100%);

  --filter-gradient: linear-gradient(89.61deg, #25262999 0%, #34363c99 100%);
  --filter-border-gradient: linear-gradient(83.22deg, #0e0e0e 0%, #5f616a 100%);

  --pop-up-gradient: linear-gradient(89.61deg, #e6e6e640 0%, #e1e1e140 100%);
  --pop-up-gradient-dark: linear-gradient(
    89.61deg,
    rgba(37, 38, 42, 0.8) 0%,
    rgba(37, 38, 45, 0.8) 100%
  );
  --pop-up-border-gradient: linear-gradient(76.2deg, #0c0c0d 0%, #767579 100%);

  --car-details-info-border-gradient: linear-gradient(25.01deg, #737373 0%, #959595 100%);
  --car-details-overview-border-gradient: linear-gradient(85.3deg, #212121 0%, #9f9f9f 100%);
  --car-details-cyprus-border-gradient: linear-gradient(87.75deg, #0e0e0e 0%, #5f616a 100%);

  --about-us-info-border-gradient: linear-gradient(88.13deg, #000000 0%, #666666 100%);
  --background-text-block-gradient-grey: linear-gradient(89.61deg, #25262a66 0%, #25262d66 100%);

  --text-block-gradient-dark: linear-gradient(89.61deg, #25262ab3 0%, #25262db3 100%);
  --text-block-gradient-light: linear-gradient(89.61deg, #24252999 0%, #25262d99 100%);

  --background-gradient-grey: linear-gradient(89.61deg, #292a2e4d 0%, #4849534d 100%);

  --background-gradient-black: linear-gradient(89.61deg, #25262a99 0%, #25262d99 100%);
  --background-gradient-grey: linear-gradient(89.61deg, #292a2e4d 0%, #4849534d 100%);
  --background-gradient-dark-0-deg: linear-gradient(
    0deg,
    var(--gradient-start) 0%,
    var(--gradient-end) 100%
  );

  --price-grey: #3c3d40;

  --background-gradient-dark-270-deg: linear-gradient(
    270deg,
    var(--gradient-start) 0%,
    var(--gradient-end) 100%
  );
  --background-block-gradient-grey: linear-gradient(
    180deg,
    var(--gradient-start) 0%,
    var(--gradient-middle) 50%,
    var(--gradient-end) 100%
  );
  --background-block-gradient-dark: linear-gradient(
    var(--gradient-end),
    var(--gradient-start),
    var(--gradient-start),
    var(----gradient-end)
  );
  --background-block-gradient-darker: linear-gradient(180deg, #14161b 0%, var(--gradient-end) 100%);
  --background-block-gradient-light: linear-gradient(89.61deg, #f4f4f426 0%, #ffffff26 100%);
  --modal-row-gradient: linear-gradient(90deg, #ffffff 0%, #f5f5f5 25%, #f5f5f5 75%, #ffffff 100%);
  --border-gradient: linear-gradient(224.97deg, #6d6f78 0%, #1c1c1c 100.72%);
  --text-gray: #999ca0;
  --text-gray-2: #c4c6ca;
  --text-gray-3: #7e808a;

  --modal-input-block-shadow: 0px 0px 20px #0000002e;

  --content-width: 1520px;
  --content-width-small: 1100px;

  --dealers-btn-gradient: linear-gradient(224.97deg, #696c76 0%, #0e0e0e 100.72%);

  --border-radius-2: 2px;
  --border-radius-20: 20px;
  --border-radius-30: 30px;
  --border-radius-100: 100px;

  --button-underline: #f5f5f5;
  --button-underline-grey: #999ca0;

  --button-bg-grey: linear-gradient(89.61deg, #44464b59 0%, #696c7659 100%);

  --border-1: 1px;
  --border-1p5: 1.5px;

  --z-index-minus-1: -1;
  --z-index-1: 1;
  --z-index-2: 2;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-99: 99;
  --z-index-100: 100;
  --z-index-200: 200;
  --z-index-500: 500;
  --z-index-1000: 1000;
  --z-index-1001: 1001;
  --z-index-1002: 1002;
  --z-index-1003: 1003;

  --font-300: 300px;
  --font-260: 260px;
  --font-200: 200px;
  --font-100: 100px;
  --font-84: 84px;
  --font-80: 80px;
  --font-72: 72px;
  --font-62: 62px;
  --font-56: 56px;
  --font-52: 52px;
  --font-50: 50px;
  --font-48: 48px;
  --font-44: 44px;
  --font-42: 42px;
  --font-40: 40px;
  --font-36: 36px;
  --font-34: 34px;
  --font-32: 32px;
  --font-30: 30px;
  --font-28: 28px;
  --font-26: 26px;
  --font-24: 24px;
  --font-22: 22px;
  --font-20: 20px;
  --font-18: 18px;
  --font-16: 16px;
  --font-14: 14px;
  --font-12: 12px;
  --font-11: 11px;
  --font-10: 10px;
  --font-8: 8px;

  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;

  --space-8: 8px;

  --space-10: 10px;
  --space-12: 12px;

  --space-14: 14px;
  --space-14-75: 14.75px;
  --space-15: 15px;
  --space-16: 16px;

  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-23: 23px;
  --space-24: 24px;

  --space-26: 26px;
  --space-28: 28px;

  --space-30: 30px;
  --space-32: 32px;
  --space-34: 34px;
  --space-35: 35px;
  --space-36: 36px;
  --space-38: 38px;
  --space-40: 40px;
  --space-42: 42px;
  --space-44: 44px;
  --space-48: 48px;
  --space-49: 49px;
  --space-50: 50px;
  --space-52: 52px;
  --space-54: 54px;
  --space-56: 56px;
  --space-58: 58px;
  --space-60: 60px;

  --space-64: 64px;
  --space-70: 70px;
  --space-72: 72px;
  --space-80: 80px;
  --space-84: 84px;
  --space-90: 90px;
  --space-92: 92px;
  --space-93: 93px;
  --space-95: 95px;
  --space-98: 98px;
  --space-100: 100px;
  --space-110: 110px;
  --space-114: 114px;
  --space-116: 116px;
  --space-120: 120px;
  --space-130: 130px;
  --space-136: 136px;
  --space-140: 140px;
  --space-142: 142px;
  --space-150: 150px;
  --space-156: 156px;
  --space-170: 170px;
  --space-180: 180px;
  --space-200: 200px;

  --wrapper-padding: var(--space-200);
  --section-padding: var(--space-120);
  --header-height: var(--space-120);

  --headline-1: var(--font-84);
  --headline-2: var(--font-44);
  --headline-3: var(--font-36);
  --headline-4: var(--font-22);
  --headline-5: var(--font-20);
  
  --button-text: var(--font-18);
  --body-big: var(--font-24);
  --body-medium: var(--font-18);
  --body-small: var(--font-18);

  --pretext: var(--font-16);
}

@media (max-width: 1720px) {
  :root {
    --wrapper-padding: var(--space-90);
  }
}

@media (max-width: 1620px) {
  :root {
    --headline-1: var(--font-72);
  }
}

@media (max-width: 1440px) {
  :root {
    --wrapper-padding: var(--space-90);
    --headline-1: var(--font-62);
    --headline-2: var(--font-34);
    --headline-3: var(--font-34);
    --headline-4: var(--font-20);
    --headline-5: var(--font-18);
    --button-text: var(--font-16);
    --body-big: var(--font-22);
  }
}

@media (max-width: 1240px) {
  :root {

    --section-padding: var(--space-100);

    --header-height: var(--space-80);

    --headline-1: var(--font-56);
    --headline-2: var(--font-32);
    --headline-3: var(--font-30);
    
    --button-text: var(--font-16);
    --body-big: var(--font-20);
    --body-medium: var(--font-16);
    --body-small: var(--font-16);
    --pretext: var(--font-14);
    
  }
}

@media (max-width: 1023px) {
  :root {
    --wrapper-padding: var(--space-24);
    --section-padding: var(--space-80);

    --headline-1: var(--font-52);
    --headline-2: var(--font-28);
    --headline-3: var(--font-20);
    --headline-4: var(--font-18);

  }
}

@media (max-width: 767px) {
  :root {
    --wrapper-padding: var(--space-16);
    --section-padding: var(--space-56);
    --header-height: var(--space-60);
    --headline-1: var(--font-32);
    --headline-2: var(--font-22);
    --headline-4: var(--font-16);
    --body-big: var(--font-18);
  }
}
