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


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


/* 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 */
.dark-mode #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) {
	.system-mode #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;
  }
}