@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
body {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.mofont {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
.mofont  strong{
  font-weight: 700;
}
.intent-list {
  list-style-type: none;
  padding: 0;
}
.animate-spotlight {
  position: fixed;
  top: -32px;
  left: -160px;
  width: 100%;
  height: 98%;
  max-width: 1400px;
  display: none;
}
.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 8px;
}
.div1 {
  grid-row: span 3 / span 3;
}
.div2 {
  grid-row: span 3 / span 3;
  grid-column-start: 1;
  grid-row-start: 4;
}
.div3 {
  grid-row: span 2 / span 2;
  grid-column-start: 2;
  grid-row-start: 1;
}
.div4 {
  grid-row: span 2 / span 2;
  grid-column-start: 2;
  grid-row-start: 3;
}
.div5 {
  grid-row: span 2 / span 2;
  grid-column-start: 2;
  grid-row-start: 5;
}
.orange-text {
  color: #E2098C;
}
.main-nav {
  position: fixed;
  width: 100%;
  z-index: 9999;
}
.sub-nav {
  background-color: #000;
  color:#fff;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sub-nav p {
  margin: 0;
  padding: 0;
}
.sub-nav a {
  color: #fff;
  text-decoration: none;  
}
.sub-nav a i {
  color: #E2098C;;
  text-decoration: none; 
  margin-left: 10px; 
}
.navbar {
  padding: 24px 80px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}
.navbar-brand img {
  width: 200px;
}
.btn-light {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  padding: 7px 30px;
  border-radius: 50px;
  transition: background 0.3s, color 0.3s;
  font-size: 14px;
}
.btn-light:hover {
  background: #E2098C;
  border: 1px solid #000;
  color: #000;
}
.btn-orange {

  
  background-image: radial-gradient( circle 971px at 10.4% 51.2%,  #C2197B 0%, #E2098C 32.1%, rgba(245,233,226,1) 99.3% );
  border: 1px solid #E2098C;
  color: #fff;
  padding: 7px 30px;
  border-radius: 50px;
  transition: background 0.3s, color 0.3s;
  font-size: 14px;
}
.btn-orange:hover {
  background: #fff;
  border: 1px solid #E2098C;
  color: #E2098C;
}
.btn-dark {
  background: #000;
  border: 1px solid #000;
  color: #fff;
  padding: 7px 30px;
  border-radius: 50px;
  transition: background 0.3s, color 0.3s;
  font-size: 14px;
}
.btn-dark:hover {
  background: #E2098C;
  border: 1px solid #000;
  color: #000;
}
.btn-lg {
  font-size: 18px;
  padding: 12px 30px;
}
#hero {
  /*background-image: linear-gradient(67.5deg, rgb(215, 215, 215) 0%, rgb(215, 215, 215) 46%,rgb(198, 198, 198) 46%, rgb(198, 198, 198) 49%,rgb(181, 181, 181) 49%, rgb(181, 181, 181) 56%,rgb(164, 164, 164) 56%, rgb(164, 164, 164) 61%,rgb(146, 146, 146) 61%, rgb(146, 146, 146) 75%,rgb(129, 129, 129) 75%, rgb(129, 129, 129) 84%,rgb(112, 112, 112) 84%, rgb(112, 112, 112) 100%),linear-gradient(22.5deg, rgb(215, 215, 215) 0%, rgb(215, 215, 215) 46%,rgb(198, 198, 198) 46%, rgb(198, 198, 198) 49%,rgb(181, 181, 181) 49%, rgb(181, 181, 181) 56%,rgb(164, 164, 164) 56%, rgb(164, 164, 164) 61%,rgb(146, 146, 146) 61%, rgb(146, 146, 146) 75%,rgb(129, 129, 129) 75%, rgb(129, 129, 129) 84%,rgb(112, 112, 112) 84%, rgb(112, 112, 112) 100%),linear-gradient(112.5deg, rgb(215, 215, 215) 0%, rgb(215, 215, 215) 46%,rgb(198, 198, 198) 46%, rgb(198, 198, 198) 49%,rgb(181, 181, 181) 49%, rgb(181, 181, 181) 56%,rgb(164, 164, 164) 56%, rgb(164, 164, 164) 61%,rgb(146, 146, 146) 61%, rgb(146, 146, 146) 75%,rgb(129, 129, 129) 75%, rgb(129, 129, 129) 84%,rgb(112, 112, 112) 84%, rgb(112, 112, 112) 100%),linear-gradient(90deg, rgb(231, 231, 231),rgb(195, 195, 195)); background-blend-mode:overlay,overlay,overlay,normal;*/
  /*background-image: linear-gradient(to top, #cfd9df 0%, #fff 100%);
  background-image: linear-gradient(to top, #f7f7f7 0%, #ace0f9 100%);
  background-image: linear-gradient(to top, #e6e9f0 0%, #fff 100%);
  background-image: linear-gradient(-20deg, #fff 0%, #fbfcdb 100%);
  background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);*/
  background-image: radial-gradient(circle at center center, rgba(217, 217, 217,0.05) 0%, rgba(217, 217, 217,0.05) 15%,rgba(197, 197, 197,0.05) 15%, rgba(197, 197, 197,0.05) 34%,rgba(178, 178, 178,0.05) 34%, rgba(178, 178, 178,0.05) 51%,rgba(237, 237, 237,0.05) 51%, rgba(237, 237, 237,0.05) 75%,rgba(138, 138, 138,0.05) 75%, rgba(138, 138, 138,0.05) 89%,rgba(158, 158, 158,0.05) 89%, rgba(158, 158, 158,0.05) 100%),radial-gradient(circle at center center, rgb(255,255,255) 0%, rgb(255,255,255) 6%,rgb(255,255,255) 6%, rgb(255,255,255) 12%,rgb(255,255,255) 12%, rgb(255,255,255) 31%,rgb(255,255,255) 31%, rgb(255,255,255) 92%,rgb(255,255,255) 92%, rgb(255,255,255) 97%,rgb(255,255,255) 97%, rgb(255,255,255) 100%); 
  background-size: cover;
background-image: linear-gradient(90deg, rgba(165, 165, 165, 0.03) 0%, rgba(165, 165, 165, 0.03) 8%,rgba(235, 235, 235, 0.03) 8%, rgba(235, 235, 235, 0.03) 9%,rgba(7, 7, 7, 0.03) 9%, rgba(7, 7, 7, 0.03) 14%,rgba(212, 212, 212, 0.03) 14%, rgba(212, 212, 212, 0.03) 17%,rgba(219, 219, 219, 0.03) 17%, rgba(219, 219, 219, 0.03) 95%,rgba(86, 86, 86, 0.03) 95%, rgba(86, 86, 86, 0.03) 100%),linear-gradient(67.5deg, rgba(80, 80, 80, 0.03) 0%, rgba(80, 80, 80, 0.03) 11%,rgba(138, 138, 138, 0.03) 11%, rgba(138, 138, 138, 0.03) 17%,rgba(122, 122, 122, 0.03) 17%, rgba(122, 122, 122, 0.03) 24%,rgba(166, 166, 166, 0.03) 24%, rgba(166, 166, 166, 0.03) 27%,rgba(245, 245, 245, 0.03) 27%, rgba(245, 245, 245, 0.03) 89%,rgba(88, 88, 88, 0.03) 89%, rgba(88, 88, 88, 0.03) 100%),linear-gradient(67.5deg, rgba(244, 244, 244, 0.03) 0%, rgba(244, 244, 244, 0.03) 4%,rgba(16, 16, 16, 0.03) 4%, rgba(16, 16, 16, 0.03) 10%,rgba(157, 157, 157, 0.03) 10%, rgba(157, 157, 157, 0.03) 20%,rgba(212, 212, 212, 0.03) 20%, rgba(212, 212, 212, 0.03) 83%,rgba(5, 5, 5, 0.03) 83%, rgba(5, 5, 5, 0.03) 84%,rgba(237, 237, 237, 0.03) 84%, rgba(237, 237, 237, 0.03) 100%),linear-gradient(90deg, #ffffff,#ffffff);


  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-spin-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-spin {
  position: absolute;
  top: 0px;
  left: 0;
  width: calc(100% + 200px);
  height: calc(100% + 200px);
 
  background:url(../img/test.png) no-repeat center center;
	background-size:cover;
	border:0px solid #000;
	animation:spin 300s linear infinite;
}
.hero-content  {
  max-width: 860px;
  margin: 0 auto;
  padding-top: 100px;
  position: relative;
  z-index: 999;
}
.hero-content h1 {
  font-size: 85px;
  line-height: 1em;
}
.hero-content p {
  font-size: 24px;
  line-height: 1.2em;
}
#home-two {
  padding-top: 100px;
  padding-bottom: 100px;  
  background-color: #F3F6FA;
}
.image-container {
  
  
 
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.home-content h1 {
  font-size: 52px;
  line-height: 1em;
}
.home-content p {
  font-size: 22px;
  line-height: 1.2em;
}
#home-three {
  padding-top: 100px;
  padding-bottom: 150px;
  /*background-image: linear-gradient(to top, #fff 0%, #dfe9f3 100%);*/
  background-color: #fff;
  background-size: cover;
}
#home-three h1 {
  margin-bottom: 50px;
}
#home-six h3 {
  font-size: 20px;
}
.image-one {
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  width: 100%;
  height: 400px;
}
.image-two {
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  width: 100%;
  height: 400px;
}
.image-three {
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
  width: 100%;
  height: 400px;
}
.image-four {
  background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
  width: 100%;
  height: 400px;
}
.image-five {
  background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
  width: 100%;
  height: 400px;
}
.card {
  border-radius: 1.75rem;
  overflow: hidden;
}
.measure-list {
  padding-left: 18px;
}
.measure-icon i {
  font-size: 38px;
  color: #fff;
  line-height: 1em;
  background: linear-gradient(90deg,#C2197B 0%, #E2098C 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  
}
.measure-card h3 {
  margin: 20px 0 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #666;
}
.measure-card {
  background-color: rgba(255, 255, 255, 0.0);
  border: 1px solid #555;
  box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.15);
}
.measure-card .card-body {
  padding: 30px 20px;

}
#home-six {
  background: linear-gradient(90deg, rgba(68, 0, 25, 1.000) 0.000%, rgba(68, 0, 22, 1.000) 16.667%, rgba(59, 0, 30, 1.000) 33.333%, rgba(42, 3, 47, 1.000) 50.000%, rgba(22, 22, 69, 1.000) 66.667%, rgba(4, 42, 90, 1.000) 83.333%, rgba(0, 61, 103, 1.000) 100.000%);
  color: #fff;
  padding-top: 100px;
  padding-bottom: 100px;
}
#home-six h1 {
  margin-bottom: 80px;
}
.grad-text {
  /*background-image: linear-gradient(35deg, #6756F4 13%, #EB2B91);*/
  background-image: radial-gradient(circle farthest-corner at 10% 20%, #C2197B 0%, #E2098C 90%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.intent-list {
  font-size: 20px;
}
.intent-list i, .good-icon {
  background-image: radial-gradient(circle farthest-corner at 10% 20%, #C2197B 0%, #E2098C 90%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 26px;
  line-height: 26px;
}
.bad-icon {
  background-color: #ccc;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 26px;
  line-height: 26px;
}
.intent-list strong, .intent-table td strong {
  font-weight: 700;
}
strong {
  font-weight: 700;
}
.intent-table td {
  vertical-align: top;
  font-size: 20px;
  line-height: 1.2em;
  padding-bottom: 10px;
}
#footer {
  /* background: url(../img/09b.jpg); */
  background-color: #fff;
  color: #333;
  margin-top: 0px;
  padding-top: 100px;
  padding-bottom: 100px;
  border-top: 1px solid #eee;
  background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}
.footer-logo {
  max-width: 200px;
}
.sub-links a, .footer-links a {
  color: #333;
  text-decoration: none;
  transition: all 200ms ease-in-out;
}
.footer-links ul {
  list-style-type: none;
  padding: 0;
  font-size: 15px;
  margin-bottom: 45px;
}
.copyright {
  font-size: 12px;
  color: #777;
}
#callout {
  background-color: #111;
  color: #fff;
  padding-top: 100px;
  padding-bottom: 100px;
}
.stopwasting {
  padding-top: 80px;
}
.stopwasting h1 {
  margin-bottom: 15px !important;
}
.rotate{
	width:300px;
	height:300px;
	background:url(../img/star.jpg) no-repeat center center;
	background-size:cover;
	border:1px solid #000;
	animation:spin 500s linear infinite;
}

@keyframes spin{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}	
}
#home-seven {
  background: #fff;
  padding-top: 100px;
  padding-bottom: 34px;
}
#home-seven h1 {
  margin-bottom: 40px;
}
.parent-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
}  
.div1-2 {
  grid-row: span 3 / span 3;
}
.div3-2 {
  grid-column-start: 2;
}
.div4-2 {
  grid-column-start: 2;
  grid-row-start: 3;
}
.impact-card h3 {
  margin: 0px 0 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #ccc;
}
.impact-card {
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.15);
  background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}
.impact-card .card-body {
  padding: 30px 20px;
}
.testimonials {
  padding-top: 60px;
  padding-bottom: 80px;
}
.testimonials h3 {
  font-weight: 300;
}
.testimonials h3 strong {
  font-weight: 700;
}
.testimonials h1 {
  font-size: 50px;
  margin-bottom: 20px !important;
}
#home-eight {
  background: linear-gradient(90deg, rgba(69, 20, 104, 1.000) 0.000%, rgba(23, 0, 60, 1.000) 16.667%, rgba(0, 0, 17, 1.000) 33.333%, rgba(0, 0, 0, 1.000) 50.000%, rgba(0, 5, 0, 1.000) 66.667%, rgba(14, 42, 0, 1.000) 83.333%, rgba(59, 84, 1, 1.000) 100.000%);
  color: #fff;
  padding-top: 100px;
  padding-bottom: 100px;
}
#home-eight h1 {
      margin-bottom: 46px;
    font-size: 54px;
}
.capture-card h3 {
  margin: 20px 0 0px;
  font-size: 42px;
}
.capture-card .subheading {
  margin: 0px 0 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #666;
  font-size: 16px;
}
.capture-card {
  background-color: rgba(255, 255, 255, 0.0);
  border: 1px solid #555;
  box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.15);
}
.capture-card .card-body {
  padding: 15px 20px;
}
.capture-title {
  font-size: 18px !important;
  font-weight: 700;
  margin-bottom: 5px;
}
.capture-content {
  font-size: 16px !important;
}
.carousel-item {
  background-color: #f7f7f7;
  min-height: 250px;
  padding: 30px;
  border-radius: 1.75rem;
  overflow: hidden;
  background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
  border: 1px solid #ddd;
}
.main-content {
  padding-top: 180px;
  padding-bottom: 100px;  





}
#product-page-content {
  height: 100vh;
}
#product-page .page-title {
  display: none;
}
.product-page-top {
  height: 100vh;
  position: relative;
  padding-top: 150px;
}
.product-page-top h4 {
  margin-bottom: 0px;
}
.product-page-top h3 {
  margin-bottom: 30px;
}
.product-page-top h1 {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 77px;
}
#product-page-bottom {
  background: linear-gradient(90deg, rgba(69, 20, 104, 1.000) 0.000%, rgba(23, 0, 60, 1.000) 16.667%, rgba(0, 0, 17, 1.000) 33.333%, rgba(0, 0, 0, 1.000) 50.000%, rgba(0, 5, 0, 1.000) 66.667%, rgba(14, 42, 0, 1.000) 83.333%, rgba(59, 84, 1, 1.000) 100.000%);
  color: #fff;
  padding-top: 100px;
  padding-bottom: 100px;
}
#product-page-bottom h1 {
  margin-bottom: 80px;
  font-size: 60px;
}
#product-page-bottom p {
  font-size: 18px;
  margin-bottom: 0px;
}
#product-page-bottom h3 {
  margin-top: 0px;
}
.load-disc {
  position: fixed;
  width: 100%;
  right: 0px;
  bottom: 0px;
  background-color: #fff;
  border-top: 1px solid #ddd;
  padding: 30px 30px;
  opacity: 1;
  transition: all 200ms ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  z-index: 999;
}
.load-disc p {
  font-size: 13px;
  margin: 0;
}
.load-disc.accepted {
  opacity: .0;
  transition: all 200ms ease-in-out;
}
.hideDisc {
  opacity: 0;
  display:none;
  transition: all 200ms ease-in-out;
}
.hideMe {
  display: none;
}
.cookie-settings {
  font-size: 13px;
  color: #2E7D32;
  text-decoration: underline;
}
.close-disc {
  font-size: 13px;
  background-color: #1565C0 !important;
  border-color: #1565C0 !important;
  background-image: none;
  border-radius: 0;
  padding: 10px;
}
#settingsModal img {
  width: 200px;
  margin-right: 15px;
}
#settingsModal .modal-header span {
  padding-top: 13px;
  margin-left: 6px;
}
#settingsModal .nav-pills .nav-link {
  text-align: left;
  border-radius: 0;
  font-size: 13px;
  line-height: 15px;
  background-color: #f7f7f7;
  border-color: #ccc;
  border-width: 0 0 1px;
  border-style: solid;
  color: #333;
  padding: 10px 20px;
  width: 100%;
}
#settingsModal h5 {
  font-weight: 700;
  color: #333;
}
#settingsModal p, #settingsModal a {
  font-size: 14px;
}
#settingsModal .nav-pills .nav-link.active, #settingsModal .nav-pills .show>.nav-link {
  color: #fff;
  background-color: #1565C0 !important;
}
.cookie-left {
  min-width: 190px;
}
.btn-cookie {
  font-size: 14px;
  background-color: #1565C0 !important;
  border-color: #1565C0 !important;
  background-image: none;
  border-radius: 0;
  color:#fff ;
}
.btn-cookie:hover {
  background-color: #2196F3 !important;
  border-color: #2196F3 !important;
  color:#fff ;
}
.hideCookie {
  display: none;
}
#settingsModal ul {
  font-size: 14px;
}
@media screen and (max-width : 767px) {
  .cookie-buttons {
    padding-top: 30px;
  }
  .load-disc {
    padding: 15px 15px;
  }
  #settingsModal img {
    width: 200px;
    margin-right: 15px;
  }
  #settingsModal .modal-header {
    font-size: 14px;
    line-height: 14px;
  }
  #settingsModal .modal-footer .btn {
    margin-right: 0 !important;
  }
}



@media screen and (min-width : 320px) and (max-width : 991px) {
  .hero-content h1 {
    font-size: 50px;
  }
  .home-content h1 {
    font-size: 50px;
  }
  .impact-card {
    margin-bottom: 30px;
  }
  .navbar-nav .btn {
    margin-top: 10px;
    margin-bottom: 5px; 
  }
  .parent {
    display: block;
  }
  .div1, .div2, .div3, .div4, .div5 {
    margin-bottom: 30px;
  }
}