/* styles for elements that only display on the Home page */

/* webpage */
.webpage{
  height:400px;
  padding:0;
  overflow:hidden;
}

/* hero */
#hero .bg-circle-1{
  animation:circle1HomeFloat 2s ease-in-out infinite alternate-reverse;
}
@keyframes circle1HomeFloat{
  0%{
    top: 23%;
    left: -6%;
    width: 20em;
    height: 20em;
    top: 41%;
    left: 1%;
  }
  100%{
    top: 15%;
    left: -4%;
    width: 20.7em;
    height: 20.7em;
    top: 44%;
    left: 4%;
  }
}
#hero .bg-circle-2{
  width:15em;
  height:15em;
  animation:circle2HomeFloat 3s ease-in-out infinite alternate-reverse;
}
@keyframes circle2HomeFloat{
  0%{
    /* top: -8%; */
    /* right: -1%; */
    top:-9%;
    right:-1%;
  }
  100%{
    top: -12%;
    right: -3%;
  }
}
#hero .bg-circle-3{
  width:5em;
  height:5em;
  animation:circle3HomeFloat 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes circle3HomeFloat{
  0%{
    top: -29%;
    left: 28%;
  }
  100%{
    top: -26%;
    left: 30%;
  }
}
#hero .small-circle-1{
  /* top:-5%; */
  top: -15%;
  left: 60%;
}
#hero .small-circle-2{
  top:90%;
  right:25%;
}
#hero .small-tri-1{
  top:32%;
  left:-10%;
}
#hero .small-tri-2{
  /* top:65%; */
  /* right:5%; */
  /* top: 96%; */
  top:110%;
  right: 18%;
  /* animation:tri2Bounce .8s ease-in-out infinite alternate-reverse; */
}

@media only screen and (max-width:1050px){
  #hero{
    height:auto;
  }
}


/* my name is section */
#my-name-is-sticker{
  max-width:350px;
  width:100%;
  border:4px solid #4E9DDE;
  border-bottom-width:20px;
  background-color: transparent;
  border-radius:8px;
  box-shadow:0px 8px 17px -8px rgb(0 0 0 / 40%);
  overflow:hidden;
  user-select:none;
}
#my-name-is-header{
  /* background-color:#f55555; */
  background-color:#4E9DDE;
  color:var(--light);
  padding: 11px 20px 7px 20px;
}
#my-name-is-content{
  padding-bottom:50%;
  background-size:36%;
  background-image:url("/img/ghm-official-harp-light-logo-trans.png");
}
/* change on dark mode */
[data-theme="dark"] #my-name-is-content{
  background-image:url("/img/ghm-official-harp-dark-logo-trans.png");
}
/*system mode, dark mode styles*/
@media (prefers-color-scheme: dark) {
	[data-theme="system"] #my-name-is-content{
    background-image:url("/img/ghm-official-harp-dark-logo-trans.png");
  }
}
/*  */

/* why us section */
#why-us h3{
  margin-bottom:30px;
}
#why-us h4{
  margin-bottom:20px;
}
#why-us .col-icon{
  max-width:70px;
  max-height:70px;
}
.next-section-link{
  margin-top:60px;
}

.col-icon{
  width:100%;
  max-width:100px;
  max-height:100px;
  margin:0 auto 20px auto;
  transition:.25s;
}
/*  */


/* services */
#services-preview{
  margin-top: 100px;
}
#services-preview .section-col-container{
  padding-top: 50px;
}
#services-preview .section-col{
  border: 1px solid transparent;
  border-radius:4px;
  padding:50px 20px 80px 20px;
  position:relative;
  top:0;
  box-shadow:none;
  transition:.35s;
}

@media (hover: hover) and (pointer: fine) {
  #services-preview .section-col:hover{
    border-color:#e3e3e3;
    top:-10px;
    box-shadow:0px 8px 17px -8px rgb(0 0 0 / 10%);
  }
}
.section-col .button-container{
  margin-top: 40px;
}
@media (hover: hover) and (pointer: fine) {
  .section-col:hover button{
    border-color:#ffcc00;
  }
}
@media (hover: hover) and (pointer: fine) {
  .section-col button:hover{
    background-color: #ffcc00;
  }
}

@media (hover: hover) and (pointer: fine) {
  #services-preview .section-col:hover .col-icon{
    color:#ffcc00;
  }
}


/* responsive styles */
@media only screen and (max-width:1050px){
  
}
@media only screen and (max-width:890px){
  #services-preview .section-col{
    padding:20px 10px 40px 10px;
  }
  .next-section-link{
    margin-top: 20px;
  }
}

/* social proof/clients */
.social-proof-logo{
  width:100%;
  height:100%;
  max-width:200px;
  max-height:150px;
}
@media only screen and (max-width: 890px){
  .social-proof-container{
    gap:var(--medium-gap);
  }
  .social-proof-logo{
    max-width:150px;
    max-height:120px;
  }
}

/* if in dark mode (general) */
[data-theme="dark"] .social-proof-logo{
  filter: grayscale(1);
}
@media (prefers-color-scheme: dark) {
	[data-theme="system"] .social-proof-logo{
		filter: grayscale(1);
	}
}

/* if in dark mode (custom ones) */
[data-theme="dark"] .social-proof-logo.force{
  filter: grayscale(1) brightness(0) invert();
}
@media (prefers-color-scheme: dark) {
	[data-theme="system"] .social-proof-logo.force{
		filter: grayscale(1) brightness(0) invert();
	}
}