* {
  /* outline: red 1px solid; */
}

:root {
  --container: 1230px;
  --container-pad: 15px;
  --section-mb: 144px;
  --block-mb: 60px;

  --accent-color:#777AF1;
  --accent-l-color:#D7D8FF;
  --accent-xl-color:#F4F4FF;
  --accent-d-color: #333399;

  --divider: 1px solid #D7D8FF;
  

  --black-color: #1B1D21;
  --black-l-color: #0a0a0a;
  --gray-color: #868686;
  --gray-d-color: #39364e;
  --gray-l-color: #A2A2A2;
  --background: #ffffff;
  --white-color: #ffffff;

  --gray-bg: #F7F6F7;

  --swiper-navigation-color: #777AF1;
  --swiper-navigation-size: 20px !important;

  --accent-grad: linear-gradient(90deg, var(--accent-xl-color) 0%, #FFFFFF 100%);

  --button-br: 5px;

  --br: 10px;
  --br-s: 5px;

  --transition-duration: 0.2s;
  --box-shadow: 0px 2px 28px 0px rgba(7, 47, 33, 0.08);

  /* modal */
  --modal-offset: 0px;
  --modal-padding: 16px;
  --modal-scroll-margin: 4px;

  /* z-index layers */
  --popup-z: 1000;
  --side-z: 900;
  --side-overlay-z:899;
  --fixed-z:800;

  --dots-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0' y='0' width='8' height='8' fill='%23777AF1'/%3E%3Crect x='16' y='0' width='8' height='8' fill='%23777AF1'/%3E%3Crect x='0' y='16' width='8' height='8' fill='%23777AF1'/%3E%3C/svg%3E");
  --link-icon: url('../images/icons/link.svg');
  --checkmark-circle-icon: url('../images/icons/checkmark-circle.svg');
  --chevron-down-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.25L6 7.75L9.5 4.25' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-right-icon: url('../images/icons/arrow-right.svg');
  --arrow-top-right-icon: url('../images/icons/arrow-top-right.svg');
  --location-icon: url('../images/icons/location-pin.svg');
  --quote-top-icon: url('../images/icons/quote-top.svg');
}

@media (max-width: 768px) {
  :root {
    --section-mb: 50px;
    --block-mb: 30px;
    --container-pad: 15px;
  }
}