:root {
  --text: #676e73;
  --primary: #e4096e;
  --second: #292e31;
}

[class^="sia-"]:before, [class*=" sia-"]:before {
  font-family: "siaello";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sia-envelope:before { content: '\e800'; }
.sia-user:before { content: '\e801'; }
.sia-phone:before { content: '\e802'; }
.sia-map:before { content: '\e803'; } 
.sia-google:before { content: '\e804'; }
.sia-facebook:before { content: '\e805'; }
.sia-youtube:before { content: '\e806'; }
.sia-instagram:before { content: '\e807'; }

.hero-image-bottom{
	animation: blob 10s infinite ease-in-out;
	border-radius: 33% 67% 75% 25% / 38% 64% 36% 62%;
	background-color: var(--primary);
}
@keyframes blob{
	0%{
		border-radius: 34% 66% 56% 44% / 61% 51% 49% 39%;
	}
	30%{
		border-radius: 55% 45% 38% 62% / 71% 44% 56% 29%  
	}
	60%{
		border-radius: 46% 54% 52% 48% / 66% 29% 71% 34%  
	}
	100%{
		border-radius: 34% 66% 56% 44% / 61% 51% 49% 39%;
	}
}
a.list-item:hover .list-text{
	color: var(--primary)
}

body {
  color: var(--text);
  font-family: Work Sans, sans-serif;
  font-size: 16px;
  line-height: 150%;
}

a {
  color: var(--primary);
  text-decoration: none;
}

.hero {
  padding: 50px 40px 100px;
  position: relative;
  overflow: hidden;
}

.hero-wrap {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.hero-50 {
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.hero-overlay {
  background-color: var(--primary);
  opacity: .85;
  background-image: radial-gradient(circle closest-corner at 50% 0, #0003, #000000b3 77%);
  position: absolute;
  inset: 0%;
}

.hero-bg {
  filter: blur(10px);
  background-image: url('../images/Starflex-3.jpg');
  background-position: 50%;
  background-size: cover;
  position: absolute;
  inset: 0%;
}

.hero-title {
  color: var(--primary);
  letter-spacing: -.2rem;
  font-size: 64px;
  font-weight: 700;
  line-height: 100%;
}

.hero-sub {
  color: #fff;
  font-size: 24px;
  line-height: 100%;
}

.hero-image {
  flex-flow: column;
  justify-content: flex-end;
  align-self: center;
  align-items: stretch;
  height: 100%;
  display: flex;
  position: relative;
}

.section {
  background-color: #fff;
  margin-top: -1px;
  padding-bottom: 75px;
  padding-left: 40px;
  padding-right: 40px;
  position: relative;
}

.section-wrap {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  width: 100%;
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.column-50 {
  width: 100%;
}

.image {
  border-radius: 26px;
  margin-top: -100px;
}

.heading-sub {
  color: var(--second);
  font-size: 24px;
  line-height: 100%;
}

.heading {
  color: var(--primary);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 31px;
  font-weight: 700;
  line-height: 100%;
}

.title {
  color: var(--second);
  font-size: 21px;
  font-weight: 700;
  line-height: 110%;
}

.icon-list-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.list-item {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.list-icon {
  background-color: var(--primary);
  color: #fff;
  border-radius: 8px;
  padding: 7px;
  font-size: 25px;
  line-height: 100%;
}

.list-text {
  color: var(--second);
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  transition: all .2s ease-in-out;
}

.m-b-30 {
  margin-bottom: 30px;
}

.hero-divider {
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  background-color: #fff;
  height: 8vw;
  position: absolute;
  inset: auto 0% 0%;
}

.m-t-40 {
  margin-top: 40px;
}

.m-b-20 {
  margin-bottom: 20px;
}

.footer {
  background-color: var(--primary);
  background-image: radial-gradient(circle at 50% 100%, #0000004d, #000000b3);
  padding: 30px 40px;
}

.footer-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.dw-logo {
  color: var(--primary);
}

.footer-social-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.social-icon {
  color: #000;
  mix-blend-mode: screen;
  background-color: #ffffffb3;
  border-radius: 50%;
  padding: 10px;
  font-size: 18px;
  line-height: 100%;
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}

.social-icon:hover {
  background-color: #fff;
}

.footer-copyright {
  color: #fff;
  text-align: center;
  font-size: 12px;
}

.hero-image-top {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 85%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 85%);
  position: relative;
  inset: 0%;
}

.hero-image-bottom {
  object-fit: cover;
  object-position: 50% 100%;
  height: 80%;
  position: absolute;
}

@media (min-width:480px) and (max-width:1070px){
  .hero-title{
    font-size: 5.7vw;
  }
    .hero-sub{
      font-size: 2.2vw;
    }
  }

@media screen and (max-width: 991px) {
  .section-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

@media screen and (max-width:479px){
  .hero-title{
    font-size: 11vw;
  }
    .hero-sub{
      font-size: 6vw;
    }
  }
  
@media (min-width:768px) and (max-width:1070px){
    .heading-sub{
      font-size: 2.2vw
    }
}

@media screen and (max-width: 767px) {
  .hero, .section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .section-wrap {
    flex-flow: column;
  }

  .image {
    width: 100%;
    margin-top: -50px;
  }

  .footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .image-2 {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .heading-sub{
		font-size: 4.3vw;
	}
}

@media screen and (max-width: 479px) {
  .hero-wrap {
    flex-flow: column;
  }

  .hero-50 {
    justify-content: space-between;
    align-items: center;
  }

  .hero-title, .hero-sub {
    text-align: center;
  }
}


@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/work-sans-v19-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/work-sans-v19-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Siaello';
  src: url('../fonts/siaello.woff2') format('woff2'), url('../fonts/siaello.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}