import CCStyle from "styled-jsx/css";

const ccTheme = {
  herobgfrom: "#014E44",
  herolbgvia: "#F5F565",
  herolbgto: "#28EBA7",
  pageBg: "#EBFEF8",
  fontColor: "#1A3234",
  primaryColor: "#194458",
  secondaryColor: "#CDADF1",
  hlgtColor: "#17194A",
};

export default CCStyle.global`
  body {
    background: ${ccTheme.pageBg};
    color: ${ccTheme.fontColor};
  }
  .cc-hero{
    background: ${ccTheme.pageBg};
  }
  .cc-mesh{
    background-image:
    radial-gradient(at 40% 20%, ${ccTheme.herobgfrom} 0px, transparent 40%),
    radial-gradient(at 80% 0%, ${ccTheme.herolbgvia} 0px, transparent 80%),
    radial-gradient(at 0% 50%, ${ccTheme.herolbgto} 0px, transparent 50%);
  }
  
  .cc-other-sec{
    background: linear-gradient(180deg, ${ccTheme.pageBg}, ${ccTheme.primaryColor} 80%, ${ccTheme.primaryColor} 100%) ;
  }

  .icon-big-open-flower{
    background: ${ccTheme.primaryColor};
  }
  .icon-bud-flower-thread{
    background: ${ccTheme.primaryColor};
    }
  .linkBtn{
    color: ${ccTheme.fontColor};
  }
  .linkBtn:hover{
    color: ${ccTheme.hlgtColor};
  }
  .list-chips li{
    border:1px dashed ${ccTheme.hlgtColor};
    color: ${ccTheme.fontColor};
    transaction: ease .25s all;
  }
  .sec-swiper{
  background: ${ccTheme.secondaryColor};
  }
  .list-chips li:hover{
    color: ${ccTheme.pageBg};
    background: ${ccTheme.hlgtColor};
  }
  .hairline-12{
    background: ${ccTheme.hlgtColor};
  }
  .showcase-sec{
    background: ${ccTheme.secondaryColor}
  }
  .dh-bullet .swiper-pagination-bullet{
    background: ${ccTheme.fontColor};
  }
  .dh-bullet .swiper-pagination-bullet-active{
    background: ${ccTheme.hlgtColor};
  }
  .btn-hairline .hairline{
      background: ${ccTheme.pageBg};
  }
  .btn-hairline button{
    background: ${ccTheme.hlgtColor};
    color: ${ccTheme.pageBg};
  }
  .btn-hairline:hover button{
    background: ${ccTheme.primaryColor};
    color: ${ccTheme.pageBg};
  }
  .sec-dh-team{
    background: ${ccTheme.secondaryColor};
  }
  .team-heading, .team-role{
    color: ${ccTheme.hlgtColor};
  }
  .team-card{
    background: ${ccTheme.primaryColor};
  }
  .team-card-wrap{
    background: ${ccTheme.secondaryColor};
  }
  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
  }
  .project-bg-grad{
    background-color: ${ccTheme.secondaryColor};
    background-image: radial-gradient(circle at 5% 1%, ${ccTheme.pageBg} 20%, transparent 80%);
    background-blend-mode: normal;
  }
`;