body {
background-color: white;
}

html {
  scroll-behavior: smooth;
}

.search-bar-image {
  width: 100%;
} 

.search-bar-container {
  position: relative;
}

.scroll {
  display:none;
}

.orange-heading {
  margin-top:25.589mm;
  text-align: center;
  font-family: 'Avenir', Nunito, sans-serif;
  letter-spacing: 6.55mm;
  font-size: 30pt; 
  color: #F7904C;
}

.sub-heading {
  margin-top:5mm;
  text-align: left;
  font-family: 'Avenir', Nunito, sans-serif;
  letter-spacing: 0.5mm;
  font-size: 14pt; 
  color: #CEE184;
  font-weight: 600;
}

.body-text {
  margin-top: -5mm;
  text-align: left;
  font-family: 'Avenir', Nunito, sans-serif;
  letter-spacing: 0.2mm;
  font-size: 14pt; 
  color: #8A8589;
  font-weight: 500;
}

.icon-heading {
  font-family: 'Avenir', Nunito, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 6px;
  margin: 0;
  font-size:20px;
  color: #7E7F7F;
}

.bodyheading {
  text-align: center;
  font-family: 'Avenir', Nunito, sans-serif;
  font-size:25.6pt; 
  color:#7E7F7F;
  letter-spacing:5px;
}

hr {
  width:250px;
  text-align: center;
}

#websiteicon,
#aboutmeicon,
#animationicon {
  width: 100%;
}

.icon-grid {
  z-index: 3;
  margin-top:55px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap:0.1em;
  grid-template-areas: 
  "ux-icon animation-icon aboutme-icon"
}


.ux-icon {
  grid-area: ux-icon;
}

.ux-icon img {
  width: 100%;
  height: auto;
}

.animation-icon {
  grid-area: animation-icon;
}

.animation-icon img {
  width: 100%;
  height: auto;
}


.aboutme-icon {
  grid-area: aboutme-icon;
}

.aboutme-icon img {
  width: 100%;
  height: auto;
}

.ux-grid {
  z-index: 3;
  margin-top:55px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap:3em;
  grid-template-areas: 
  "lightsoff lightsoff"
  "percy blokesupport"
  "lelu lelu"
}


.lightsoff {
  grid-area: lightsoff;
  transition: all .2s ease-in-out;
}

.lightsoff:hover {
  transform: scale(1.1);
}

.lightsoff img {
  width: 100%;
  height: auto;
}

.percy {
  grid-area: percy;
  transition: all .2s ease-in-out;
}

.percy:hover {
  transform: scale(1.1);
}

.percy img {
  width: 100%;
  height: auto;
}

.blokesupport {
  grid-area: blokesupport;
  transition: all .2s ease-in-out;
}

.blokesupport:hover {
  transform: scale(1.1);
}

.blokesupport img {
  width: 100%;
  height: auto;
}

.lelu {
  grid-area: lelu;
  transition: all .2s ease-in-out;
}

.lelu:hover {
  transform: scale(1.1);
}

.lelu img {
  width: 100%;
  height: auto;
}


.animations-grid {
  z-index: 3;
  margin-top:55px;
  margin-bottom:55px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:1em;
  grid-template-areas: 
  "renewable-energy renewable-energy"
  "archer financefamily"
}

.renewable-energy {
  grid-area:renewable-energy;
  transition: all .2s ease-in-out;
}

.renewable-energy:hover {
  transform: scale(1.1);
}

.renewable-energy img {
  width: 100%;
  height: auto;
}

.archer {
  grid-area: archer;
  transition: all .2s ease-in-out;
}

.archer:hover {
  transform: scale(1.1);
}

.archer img {
  width: 100%;
  height: auto;
}

.financefamily {
  grid-area: financefamily;
  transition: all .2s ease-in-out;
}

.financefamily:hover {
  transform: scale(1.1);
}

.financefamily img {
  width: 100%;
  height: auto;
}

.aboutme {
  width:100%;
  margin-left:-60px;
  margin-bottom: 50px;
}

.social-media-icons {
  z-index: 3;
  margin-top:5px;
  margin-left:55px;
  margin-bottom:55px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap:1.5em;
  grid-template-areas: 
  "doc-icon linkedin-icon email-icon insta-icon"
}

.doc-icon {
  grid-area:doc-icon;
  width: 60px;
}

.linkedin-icon {
  grid-area:linkedin-icon;
  width: 60px;
}

.email-icon {
  grid-area:email-icon;
  width: 60px;
}

.insta-icon {
  grid-area:insta-icon;
  width: 60px;
}


@media (min-width: 1500px) {

  .scroll {
    display:block;
    width: 2.5%;
    position: absolute;
    z-index: 100;
    left: 50px;
    bottom: 65px;;
  }
  
  .animate__animated.animate__bounce {
    --animate-duration: 5s;
  }
  
}


/* Larger than tablet */
@media (max-width: 750px) {

  .bodyheading {
    margin-top:-20px;
    font-size:15pt;
    letter-spacing: 3px;
  }

.orange-heading {
  margin-top:10.589mm;
  text-align: center;
  font-family: 'Avenir', Nunito, sans-serif;
  letter-spacing: 3.55mm;
  font-size:15.6pt; 
  color: #FBA919;
}

.icon-heading {
  font-family: 'Avenir', Nunito, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  font-size:12px;
}

.line {
  width:60px;
  text-align: center;
  margin-top:-3.273mm;
}

#websiteicon {
  margin: 0 auto;
}

#aboutmeicon {
  margin: 0 auto;
}

#animationicon {
  margin: 0 auto;
}

.wrapper {
  gap:2em;
}


.wrapper2 {
  gap:0.1em;
}


.aboutme {
  width:100%;
  margin-left:0px;
}

.icon-heading {
  font-size:12px;
}

.sub-heading {
  font-size:11.9px;
}

.body-text {
  font-size:14px;
}

.percy,
.blokesupport,
.lelu {
  margin-top: -50px;
}

.archer,
.financefamily {
  margin-top:-10px;
}

.doc-icon {
  width: 50px;
}

.linkedin-icon {
  width: 50px;
}

.email-icon {
  width: 50px;
}

.insta-icon {
  width: 50px;
}

.aboutme {
  width:100%;
  margin-bottom: 0px;
}


}

@media (max-width: 550px) {
  .row-icons #websiteicon,
  .row-icons #aboutmeicon,
  .row-icons #animationicon {
    margin: 0 auto;
  }

  .row-icons p {
    margin: 0;
  }

  .link-referral {
    font-size: 14px;
  }

  .referral-icons {
    width:50%;
  }

  .social-media-icons {
  z-index: 3;
  margin-top:55px;
  margin-left:20px;
  }
  
}