:root {
  --blue-main: #1863dc;
  --blue-dark: #134fb0;
  --blue-light: #4682e3;
  --blue-bg1: #d1e0f8;
  --blue-bg2: #ecf3fc;
  --blue-bg3: #f1f6fd;
  --grey-title: #27283c;
  --grey-body: #3d3e50;
  --grey-label: #525363;
  --grey-placeholder: #686876;
  --grey-line: #bebfc5;
  --white: #ffffff;
  --red: #dd425a;
  --dark-red: #b13548;
}

.cy-template a,
.cy-template ul a,
.cy-template p a,
.cy-template li a {
  color: var(--blue-main);
}

.cy-template .white-text {
  color: var(--white) !important;
}

.cy-template .blue-text,
.cy-template .blue-main {
  color: var(--blue-main) !important;
}

.cy-template a:hover {
  color: var(--blue-main);
}

.cy-template h1,
.cy-template .head1,
.cy-template h2,
.cy-template .head2,
.cy-template h3,
.cy-template .head3,
.cy-template h4,
.cy-template .head4,
.cy-template h5,
.cy-template .head5,
.cy-template h6,
.cy-template .head6,
.cy-template .grey-title {
  color: var(--grey-title);
}

.cy-template .subhead,
.cy-template p,
.cy-template .body-text1,
.cy-template .body-text2,
.cy-template .body-text3,
.cy-template .small-text1,
.cy-template .small-text2,
.cy-template li,
.cy-template .grey-body {
  color: var(--grey-body);
}

.cy-template .grey-placeholder {
  color: var(--grey-placeholder);
}

.cy-template .grey-line {
  color: var(--grey-line);
}

.cy-template .grey-label {
  color: var(--grey-label);
}

.cy-template .divider-bottom,
.cy-template .divider-top,
.cy-template .divider-right,
.cy-template .divider-left,
.cy-template .border {
  border-color: var(--grey-line);
}

.cy-template .pri-xl-btn,
.cy-template .pri-lg-btn,
.cy-template .pri-md-btn,
.cy-template .pri-sm-btn,
.cy-template button,
.cy-template input[type="submit"] {
  background: var(--blue-main);
  border-color: var(--blue-main) !important;
  color: var(--white);
}

.cy-template .pri-sm-btn:hover,
.cy-template .pri-md-btn:hover,
.cy-template .pri-lg-btn:hover,
.cy-template .pri-xl-btn:hover,
.cy-template button:hover,
.cy-template input[type="submit"]:hover,
.cy-template .pri-sm-btn:focus,
.cy-template .pri-md-btn:focus,
.cy-template .pri-lg-btn:focus,
.cy-template .pri-xl-btn:focus {
  background: var(--blue-dark);
  border-color: var(--blue-dark) !important;
  color: var(--white);
}

.cy-template .sec-sm-btn:hover,
.cy-template .sec-md-btn:hover,
.cy-template .sec-lg-btn:hover,
.cy-template .sec-xl-btn:hover,
.cy-template .sec-sm-btn:focus,
.cy-template .sec-md-btn:focus,
.cy-template .sec-lg-btn:focus,
.cy-template .sec-xl-btn:focus {
  background: var(--blue-bg1) !important;
  border-color: var(--blue-dark) !important;
  color: var(--blue-dark);
}
.cy-template .sec-sm-btn,
.cy-template .sec-md-btn,
.cy-template .sec-lg-btn,
.cy-template .sec-xl-btn {
  border-color: var(--blue-main);
  color: var(--blue-main);
  background: transparent;
}

.cy-template .sec-sm-btn:hover,
.cy-template .sec-md-btn:hover,
.cy-template .sec-lg-btn:hover,
.cy-template .sec-xl-btn:hover {
  border-color: var(--blue-dark);
}

/* shadows */
.cy-template .shadow1-grey,
.cy-template .grey-shadow {
  box-shadow: 0px 1px 8px rgba(39, 40, 60, 0.12);
}

.cy-template .shadow1-blue,
.cy-template .blue-shadow {
  box-shadow: 0px 1px 8px rgba(24, 99, 220, 0.12);
}

.cy-template .shadow2-grey,
.cy-template .grey-shadow2 {
  box-shadow: 0px 8px 26px -4px rgba(39, 40, 60, 0.12);
}

.cy-template .shadow2-blue,
.cy-template .blue-shadow2 {
  box-shadow: 0px 8px 28px -4px rgba(24, 99, 220, 0.15);
}

.cy-template .shadow-gradient,
.cy-template .gradient-shadow {
  box-shadow: -13px -16px 48px -18px rgba(24, 99, 220, 0.3),
    7px 15px 46px -15px rgba(45, 173, 112, 0.3);
}

.cy-template .red-text {
  color: var(--dark-red) !important;
}

/* background colors */
.cy-template .bg-0 {
  background: transparent;
}

.cy-template .blue-bg {
  background-color: var(--blue-main);
}

.cy-template .white-bg {
  background-color: var(--white);
}

.cy-template .blue-bg-1 {
  background-color: var(--blue-bg1);
}

.cy-template .blue-bg-2 {
  background-color: var(--blue-bg2);
}

.cy-template .grey-bg,
.blue-bg-3 {
  background-color: var(--blue-bg3);
}

.cy-template .yellow-bg-1 {
  background-color: #ffeccc;
}

.cy-template .reg-bg-1,
.cy-template .red-bg-1 {
  background-color: #e4687b;
}

.cy-template .hero-bg-img {
  background-color: var(--blue-bg3);
  background-image: url(../../images/guideline-images/hero-bg.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.cy-template .hero-side-bg-img {
  background-color: var(--blue-bg3);
  background-image: url(../../images/guideline-images/hero-side-bg.webp);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
}

.cy-template .gradient-bg {
  background: linear-gradient(
      107.81deg,
      rgba(24, 99, 220, 0.15) 11.72%,
      rgba(236, 243, 252, 0) 47.88%,
      rgba(45, 173, 112, 0.13) 87.71%
    ),
    var(--blue-bg2);
}

.cy-template .hero-gradient-bg {
  background: radial-gradient(
      49.73% 66.5% at 80.42% 46.43%,
      rgba(45, 112, 173, 0.18) 8.65%,
      rgba(24, 99, 220, 0.15) 24.05%,
      rgba(45, 173, 112, 0.06) 56.15%,
      rgba(236, 243, 252, 0) 75.78%,
      rgba(236, 243, 252, 0) 100%
    ),
    var(--blue-bg3);
}

.cy-template .linear-gradient {
  background: linear-gradient(180deg, rgba(236, 243, 252, 0) 0%, #ecf3fc 100%);
}

.cy-template .gradient-cy-bg {
  background: linear-gradient(
    141deg,
    rgba(117, 208, 251, 0.54) 10.36%,
    rgba(132, 179, 254, 0.24) 29.69%,
    rgba(236, 243, 252, 0) 45.85%,
    rgba(45, 173, 112, 0.48) 84.93%
  );
}
.cy-template .gradient-cy-bg-3 {
  background: var(
    --Gradient-CY-Bg-Gradient-3,
    linear-gradient(
      108deg,
      rgba(117, 208, 251, 0.54) 11.72%,
      rgba(132, 179, 254, 0.24) 31.42%,
      rgba(236, 243, 252, 0) 47.88%,
      rgba(45, 173, 112, 0.48) 87.71%
    ),
    #daf4fc
  );
}
.cy-template img.gradient-bgi {
  filter: drop-shadow(7px 15px 46px rgba(45, 173, 112, 0.3))
    drop-shadow(-13px -16px 48px rgba(24, 99, 220, 0.3));
}

.cy-template .responsive-hero-bg {
  background-color: hsla(215, 75%, 96%, 1);
  background-image: radial-gradient(
      at 50% 25%,
      hsla(215, 75%, 96%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 19% 49%, hsla(215, 75%, 96%, 1) 0px, transparent 50%),
    radial-gradient(at 100% 46%, hsla(215, 75%, 96%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 73%, hsla(215, 75%, 96%, 1) 0px, transparent 50%),
    radial-gradient(at 97% 75%, hsla(215, 75%, 96%, 1) 0px, transparent 50%),
    radial-gradient(at 50% 99%, hsla(223, 100%, 68%, 1) 0px, transparent 50%),
    radial-gradient(at 50% 91%, hsla(148, 86%, 66%, 1) 0px, transparent 50%),
    radial-gradient(at 50% 78%, hsla(223, 100%, 68%, 1) 0px, transparent 50%);
  background-repeat: no-repeat;
  background-position: 0px 45px;
}
@media (min-width: 768px) {
  .cy-template .ellipse-bg {
    background-image: url(/wp-content/themes/cookieyes-new/assets/images/guideline-images/green-blue-bg.webp);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
  }
}
@media (max-width: 767px) {
  .cy-template .responsive-hero-bg {
    background-color: hsla(215, 75%, 96%, 1);
    background-image: radial-gradient(
        at 44% 60%,
        hsla(215, 75%, 96%, 1) 0px,
        transparent 50%
      ),
      radial-gradient(at 11% 69%, hsla(215, 75%, 96%, 1) 0px, transparent 50%),
      radial-gradient(at 75% 62%, hsla(215, 75%, 96%, 1) 0px, transparent 50%),
      radial-gradient(at 0% 73%, hsla(215, 75%, 96%, 1) 0px, transparent 50%),
      radial-gradient(at 93% 74%, hsla(215, 75%, 96%, 1) 0px, transparent 50%),
      radial-gradient(at 32% 100%, hsla(223, 100%, 68%, 1) 0px, transparent 50%),
      radial-gradient(at 49% 100%, hsla(148, 86%, 66%, 1) 0px, transparent 50%),
      radial-gradient(at 72% 100%, hsla(223, 100%, 68%, 1) 0px, transparent 50%);
    background-position: bottom;
  }
}