/* Press Start 2P CSS class

.press-start-2p-regular {
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
  }   

Play CSS class

.play-regular {
  font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.play-bold {
  font-family: "Play", sans-serif;
  font-weight: 700;
  font-style: normal;
}
*/

html, body {
    overflow-x: hidden;
    margin:0;
    background-color: #F7F8FA;
  }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
  
html {
    scroll-behavior:smooth;
}


h1 {
    font-family: "Press Start 2P", system-ui;
    font-size: 57px;
    line-height: 1.4;
}

h2 {
    font-family: "Play", sans-serif;
    font-size: 52px;
    line-height: 1.2;
}

h3 {
  font-family: "Play", sans-serif;
    font-size: 45px;  
    line-height: 1.2;
}

h4 {
  font-family: "Play", sans-serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 300;
}

h5 { /* Press Start 2p subhead */
    font-family: "Press Start 2P", system-ui;
    font-size: 16px;
    line-height: 1.4;
}

p {
  font-family: "Play", sans-serif;
    font-size: 22px;
    line-height: 1.4;
}

.revealUp1{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.25s;
}

.revealUp1.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp2{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.50s;

}

.revealUp2.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp3{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.75s;

}

.revealUp3.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp1Load{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.25s;
}

.revealUp1Load.active{
    transform: translateY(0);
    opacity: 1;
}

.revealLeftLoad{
    position: relative;
    transform: translateY(250px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.25s;
}

.revealLeftLoad.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp2Load{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.50s;

}

.revealUp2Load.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp3Load{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.75s;

}

.revealUp3Load.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp4{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 2s;
}

.revealUp4.active{
    transform: translateY(0);
    opacity: 1;
}

.revealFade{
    position: relative;
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.25s;
}

.revealFade.active{
    opacity: 1;
}

button {
    padding: 15px 35px;
    background-color: #F2F0F0;
    border: 0px;
    font-family: "Press Start 2P", system-ui;
    line-height: 1.8;
    text-align: center;
    color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    cursor: pointer;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

button:hover {
    background-color: #DB6339;
    color: #F2F0F0;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

#redButton {
    padding: 15px 35px;
    background-color: #DB6339;
    color: #F2F0F0;
    border: 0px;
    font-family: "Press Start 2P", system-ui;
    line-height: 1.8;
    text-align: center;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    cursor: pointer;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

#redButton:hover {

    background-color: #239AFF;
    color: #F2F0F0;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}


.noDecoration {
    text-decoration: none;
    color: #ffffff;
    font-size: 20px;
    font-family: "Play", sans-serif;
    line-height: 1.3;
}

#cloud {
    max-width: 150%;
    margin: 0;
    padding: 0;
    animation: jumpInfinite 2.5s infinite;
}

#cloud2 {
    max-width: 150%;
    margin: 0;
    padding: 0;
    animation: jumpInfinite2 3.5s infinite;
}

@keyframes jumpInfinite {
    0% {
      margin-top: 0;
    }
    50% {
      margin-top: 20px;
    }
    100% {
      margin-top: 0;
    }
  }

  @keyframes jumpInfinite2 {
    0% {
      margin-top: 0;
    }
    50% {
      margin-top: 10px;
    }
    100% {
      margin-top: 0;
    }
  }

#coin1 {
    max-width: 100%;
    margin: 0;
    padding: 0;
    animation: jumpInfinite 2.5s infinite;
    position: relative;
}


#icon {
    max-width: 100%;
}

#csMap {
    max-width: 80%;
    border-radius: 40px;
}

#packedTruck {
    max-width: 100%;
    border-radius: 100%;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

.manitou-springs-section1 a {
    text-decoration: none!important;
    color: #239AFF;
}

ul {
    column-count: 2;
}

li {
    margin-left: 30px;
}

/* Start Nav */

.topNav {
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 15px;
    position: fixed;
    width: 100vw;
    height: 120px;
    z-index: 99;
    grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
    grid-template-rows: 100%;
    grid-template-areas: 
      "logo services why-us cheats-tips play button";
    margin: 0;
    padding: 30px 80px;
  }

  .topNav.scrolled {
    background-color: rgba(35, 154, 255, 0.95) !important;
    transition: background-color 200ms linear;
  }

  #navItem {
    font-size: 18px;
    moz-transition: all .25s;
    -o-transition: all .25s;
    -webkit-transition: all .25s;
    transition: all .25s;
    align-content: center;
  }

  .navLogo {
    grid-area: logo;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .navServices {
    grid-area: services;
    color: #F7F8FA !important;
    text-align: center;
  }

  .navWhy-us {
    grid-area: why-us;
    text-align: center;
  }

  .navCheats-tips {
    grid-area: cheats-tips;
    text-align: center;
  }

  .navPlay {
    grid-area: play;
    text-align: center;
  }

  .navButton {
    grid-area: button;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
    color: #001C7D;
  }

    .logo {
        max-height: 120px;
        margin-top: -22px;
    }

  .topNav .icon {
    display: none;
  }

  .dropdownList1 {
    display: none;
    position: absolute;
    background-color: #F2F0F0;
    min-width: 180px;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
    z-index: 1;
    margin: 0px 30px 0px 0px;
    column-count: 3;
  }

  .dropdownList1 a {
    float: none;
    color: #239AFF;
    padding: 12px 5px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: 'Raleway' ,sans-serif;
  }

  .dropdownList1 a:hover {
    color: #E4C06F;
    padding: 12px 5px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .topnav a:hover, .navServices:hover .dropdownList1 {
    padding: 10px 40px;
    background: #F7F8FA;
    color: white;
  }

  .navServices:hover .dropdownList1 {
    display: block;
  }

  .tl-corner {
    width: 8px;
    height: 8px;
    border-radius: 75px;
    background-color: #DB6339;
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
  }

  .tl-corner:hover {
    background-color: #DB6339;
  }

  .tr-corner {
    width: 8px;
    height: 8px;
    border-radius: 75px;
    background-color: #DB6339;
    position: absolute;
    right: 0;
    top: 0;
    margin: 4px;
  }

  .tr-corner:hover {
    background-color: #DB6339;
  }

  .bl-corner {
    width: 8px;
    height: 8px;
    border-radius: 75px;
    background-color: #DB6339;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 4px;
  }

  .bl-corner:hover {
    background-color: #DB6339;
  }

  .br-corner {
    width: 8px;
    height: 8px;
    border-radius: 75px;
    background-color: #DB6339;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 4px;
  }

  .br-corner:hover {
    background-color: #DB6339;
  }

  .topnav a:hover, .navResources:hover {
    padding: 10px 40px;
    background: #001C7D;
    border-radius: 40px;   
    color: white;
  }

  .navResources:hover {
    display: block;
  }

  .navButton {
    display: block;
    color: #DB6339;
  }

  .mobileNav {
    display: none;
  }

/* End Nav */

.home-hero {
    background-color: #F7F8FA;
    background-image: url("../images/home-hero-background.png");
    background-size: cover;
    background-position: bottom;
    overflow: hidden;
    display: grid;
    height: 1100px;
    position: relative;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 6% 36% 13% 6% 41%;
    grid-template-areas: 
    "prehead prehead prehead prehead prehead prehead prehead prehead prehead prehead . ."
    "headline headline headline headline headline headline headline headline headline headline headline cloud1"
    "subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead cloud2 ."
    "cta cta cta phone phone phone phone phone . . . ."
    ". . . . . . . . . . . truck";
    column-gap: 24px;
    row-gap: 40px;
    padding: 205px 80px;
}

.home-hero-prehead {
    grid-area: prehead;
    color: #F7F8FA;
}

.home-hero-headline {
    grid-area: headline;
    color: #F7F8FA;
}

.home-hero-cloud1 {
    grid-area: cloud1;
}

.home-hero-subhead {
    grid-area: subhead;
    color: #F7F8FA;
}

.home-hero-cloud2 {
    grid-area: cloud2;
}

.home-hero-cta {
    grid-area: cta;
}

.home-hero-phone {
    grid-area: phone;
    color: #F7F8FA;
    margin-top: 10px;
}

.home-hero-truck {
    grid-area: truck;
    position: relative;
    /* height: 100%; */
}

#bitTruck {
    position: absolute;
    top: 50%; /* Center vertically within the container */
    right: 180px; /* Start slightly off-screen to the right */
    transform: translateY(-50%);
    transition: transform 0.1s linear;
}

#cs-map-no-bckgrnd {
    max-width: 100%;
}

#long-image1 {
    max-width: 100%;
    margin-left: 60px;
}

.services-s2-image {
    max-width: 100%;
}

.home-section1 {
    background-color: #F7F8FA;
    background-image: url("../images/home-s1-background.png");
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: top right;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 33% 43% 23%;
    grid-template-areas: 
      "subhead subhead subhead subhead subhead subhead . . . . . ."
      "text text text text text text text . cloud . . ."
      "button button button button button . . . . . . .";
    column-gap: 24px;
    row-gap: 50px;
    padding: 106px 80px 300px 80px;
}

.home-s1-subhead {
    grid-area: subhead;
    color: #DB6339;
}

.home-s1-text {
    grid-area: text;
    color: #29120B;
}

.home-s1-button {
    grid-area: button;
}

.home-s1-cloud {
    grid-area: cloud;
}

.home-section2 {
    background-color: #F7F8FA;
    background-image: url("../images/home-s2-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 24% 38% 38%;
    grid-template-areas: 
      ". . . . . subhead subhead subhead subhead subhead subhead subhead"
      "card1 card1 card1 card1 card2 card2 card2 card2 card3 card3 card3 card3"
      "card4 card4 card4 card4 card5 card5 card5 card5 card6 card6 card6 card6";
    column-gap: 24px;
    row-gap: 50px;
    padding: 306px 80px 300px 80px;
    margin-top: -230px;
}

.home-s2-subhead {
    grid-area: subhead;
    color: #F2F0F0;
    text-align: right;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

.home-s2-c1 {
    grid-area: card1;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s2-c1:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s2-c2 {
    grid-area: card2;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s2-c2:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s2-c3 {
    grid-area: card3;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s2-c3:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s2-c4 {
    grid-area: card4;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s2-c4:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s2-c5 {
    grid-area: card5;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s2-c5:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s2-c6 {
    grid-area: card6;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s2-c6:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-section3 {
    background-color: #F7F8FA;
    background-image: url("../images/home-s3-background.png");
    background-size: 100%;
    background-repeat: repeat-y;
    background-position: top;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 24% 38% 38%;
    grid-template-areas: 
      "subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead ."
      "card1 card1 card1 card2 card2 card2 card3 card3 card3 card4 card4 card4"
      "card5 card5 card5 card6 card6 card6 card7 card7 card7 card8 card8 card8";
    column-gap: 24px;
    row-gap: 50px;
    padding: 206px 80px 150px 80px;
}

.home-s3-subhead {
    grid-area: subhead;
    color: #F7F8FA;
    text-align: left;
    background-color: transparent;
}

.home-s3-cards {
    background-image: url("../images/home-s3-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#cardTitle {
    text-align: center;
    margin: 0px 0;
    background-color: #220F11;
    padding: 15px 10px;
    text-decoration: none!important;
    color: #F2F0F0;
    font-size: 14px;
    line-height: 1.8;
}

#cardTitle, a {
    text-decoration: none!important;
    color: #F2F0F0;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

#cardTitle:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

#cardBody {
    text-align: left;
    background-color: #F2F0F0;
    box-shadow: inset 8px 8px 0px 5px #162210, inset -8px -8px 0px 5px #6D7462;
    padding: 15px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    padding: 45px 25px 90px 25px;
    margin: 30px 0 0 0 ;
    height: 70% !important;
}

#cardBody, a {
    text-decoration: none!important;
    color: #29120B;
}


#cardBody:hover {
    background-color: #85E3FF;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.home-s3-c1 {
    grid-area: card1;
    color: #422219;
}

.home-s3-c2 {
    grid-area: card2;
    color: #422219;
}

.home-s3-c3 {
    grid-area: card3;
    color: #422219;
}

.home-s3-c4 {
    grid-area: card4;
    color: #422219;
}

.home-s3-c5 {
    grid-area: card5;
    color: #422219;
}

.home-s3-c6 {
    grid-area: card6;
    color: #422219;
}

.home-s3-c7 {
    grid-area: card7;
    color: #422219;
}

.home-s3-c8 {
    grid-area: card8;
    color: #422219;
}

.home-section4 {
    background-color: #F7F8FA;
    background-image: url("../images/home-s4-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 25% 75%;
    grid-template-areas: 
      ". . . coins coins coins coins coins . . . ."
      ". text text text text text text text text text . .";
    row-gap: 50px;
    padding: 556px 80px 650px 80px;
    margin-top: 190px;
}

.home-s4-coins {
    grid-area: coins;
    text-align: center!important;
    position: absolute;
    left: 46.5%; /* Center horizontally */
    transform: translate(-50%, -50%);
    margin-top: 30px;
}

.home-s4-text {
    grid-area: text;
    color: #F7F8FA;
    text-align: center;
    position: static;
    margin-top: 30px;
}

.home-section5 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 25% 75%;
    grid-template-areas: 
      "subhead subhead subhead subhead subhead subhead subhead subhead image image image image"
      "text text text text text text text . image image image image";
    row-gap: 50px;
    padding: 106px 80px 100px 80px;
    margin-top: 190px;
}

.home-s5-subhead {
    grid-area: subhead;
    color: #DB6339;
    text-align: left;
}

.home-s5-text {
    grid-area: text;
}

.home-s5-image {
    grid-area: image;
}

.end-cta {
    background-color: #F7F8FA;
    background-image: url("../images/cta-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 15% 35% 25% 25%;
    grid-template-areas: 
      "clouds1 clouds1 clouds1 clouds1 clouds1 clouds1 clouds1 clouds1 clouds1 clouds1 clouds1 clouds1"
      "text text text text text text text text text text text text"
      "clouds2 clouds2 clouds2 clouds2 clouds2 clouds2 clouds2 clouds2 clouds2 clouds2 clouds2 clouds2"
      "truck . . . . . . . . . . .";
    row-gap: 50px;
    padding: 506px 80px 290px 80px;
    margin-top: 90px;
    margin-bottom: 0;
}

.end-cta-text {
    grid-area: text;
    color: #F7F8FA;
    text-align: center;
}

.end-cta, .end-cta-text, a {
    text-decoration: none!important;
    color: #F2F0F0;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}


.end-cta-clouds1 {
    grid-area: clouds1;
    text-align: center!important;
    position: absolute;
    right: 25%;
    transform: translate(50%, 40%);
    margin-top: 30px;
}

.end-cta-clouds2 {
    grid-area: clouds2;
    text-align: center!important;
    position: absolute;
    left: 20%;
    transform: translate(-50%, -90%);
    margin-top: 30px;
}

.animated-wrapper {
    display: block;
}

.animated-wrapper-mobile {
    display: none;
}

.end-cta-truck {
    grid-area: truck;
    position: relative;
    bottom: 0px;

}


#bitTruckRight {
    position: absolute;
    top: 50%; /* Center vertically within the container */
    right: -480px;
    transform: translateY(0%);
    transition: transform 0.1s linear;
    bottom: 0%;
}

/* Services CSS Start */

.services-hero {
    background-color: #F7F8FA;
    background-image: url("../images/home-hero-background.png");
    background-size: cover;
    background-position: bottom;
    overflow: hidden;
    display: grid;
    height: 1100px;
    position: relative;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 6% 26% 6% 46% 16%;
    grid-template-areas: 
    "prehead prehead prehead prehead prehead prehead prehead prehead prehead prehead . ."
    "headline headline headline headline headline headline headline headline headline headline headline cloud1"
    "subhead subhead subhead subhead subhead subhead subhead subhead subhead cloud2 cloud2 ."
    "phone phone phone phone phone phone phone phone . . . ."
    ". . . . . . . . . . . truck";
    column-gap: 24px;
    row-gap: 20px;
    padding: 305px 80px 205px 80px;
}

.services-hero-prehead {
    grid-area: prehead;
    color: #F7F8FA;
}

.services-hero-headline {
    grid-area: headline;
    color: #F7F8FA;
}

.services-hero-cloud1 {
    grid-area: cloud1;
}

.services-hero-subhead {
    grid-area: subhead;
    color: #F7F8FA;
}

.services-hero-cloud2 {
    grid-area: cloud2;
}

.services-hero-phone {
    grid-area: phone;
    color: #F7F8FA;
    margin-top: 10px;
}

.services-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 30% 28% 41%;
    grid-template-areas: 
      "subhead subhead subhead subhead subhead subhead subhead subhead . . . ."
      "text text text text text text text map map map map map"
      "button button button button button . . . . . . .";
    column-gap: 24px;
    row-gap: 30px;
    padding: 205px 80px 90px 80px;
}

.services-s1-subhead {
    grid-area: subhead;
    color: #DB6339;
}

.services-s1-text {
    grid-area: text;
    color: #29120B;
}

.services-s1-button {
    grid-area: button;
}

.services-s1-map {
    grid-area: map;
}

.services-section2 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    align-items: space-around;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 6.5% 3.5% 6.5% 6.5% 3.5% 6.5% 6.5% 3.5% 6.5% 6.5% 3.5% 6.5% 6.5% 3.5% 6.5% 6.5% 3.5% 6.5%;
    grid-template-areas: 
      "image1 image1 image1 image1 subhead1 subhead1 subhead1 subhead1 subhead1 subhead1 subhead1 subhead1"
      "image1 image1 image1 image1 text1 text1 text1 text1 text1 text1 text1 ."
      "image1 image1 image1 image1 button1 button1 button1 button1 button1 button1 button1 button1"
      "subhead2 subhead2 subhead2 subhead2 subhead2 subhead2 subhead2 subhead2 image2 image2 image2 image2"
      "text2 text2 text2 text2 text2 text2 text2 . image2 image2 image2 image2"
      "button2 button2 button2 button2 button2 button2 button2 button2 image2 image2 image2 image2"
      "image3 image3 image3 image3 subhead3 subhead3 subhead3 subhead3 subhead3 subhead3 subhead3 subhead3"
      "image3 image3 image3 image3 text3 text3 text3 text3 text3 text3 text3 ."
      "image3 image3 image3 image3 button3 button3 button3 button3 button3 button3 button3 button3"
      "subhead4 subhead4 subhead4 subhead4 subhead4 subhead4 subhead4 subhead4 image4 image4 image4 image4"
      "text4 text4 text4 text4 text4 text4 text4 . image4 image4 image4 image4"
      "button4 button4 button4 button4 button4 button4 button4 button4 image4 image4 image4 image4"
      "image5 image5 image5 image5 subhead5 subhead5 subhead5 subhead5 subhead5 subhead5 subhead5 subhead5"
      "image5 image5 image5 image5 text5 text5 text5 text5 text5 text5 text5 ."
      "image5 image5 image5 image5 button5 button5 button5 button5 button5 button5 button5 button5"
      "subhead6 subhead6 subhead6 subhead6 subhead6 subhead6 subhead6 subhead6 image6 image6 image6 image6"
      "text6 text6 text6 text6 text6 text6 text6 . image6 image6 image6 image6"
      "button6 button6 button6 button6 button6 button6 button6 button6 image6 image6 image6 image6";
    column-gap: 24px;
    row-gap: 30px;
    padding: 60px 80px 605px 80px;
}

.services-s2-image1 {
    grid-area: image1;
}

.services-s2-subhead1 {
    grid-area: subhead1;
    padding-top: 20px;
    color: #DB6339;
}

.services-s2-text1 {
    grid-area: text1;
}

.services-s2-button1 {
    grid-area: button1;
}

.services-s2-image2 {
    grid-area: image2;
}

.services-s2-subhead2 {
    grid-area: subhead2;
    padding-top: 20px;
    color: #DB6339;
}

.services-s2-text2 {
    grid-area: text2;
}

.services-s2-button2 {
    grid-area: button2;
}

.services-s2-image3 {
    grid-area: image3;
}

.services-s2-subhead3 {
    grid-area: subhead3;
    padding-top: 20px;
    color: #DB6339;
}

.services-s2-text3 {
    grid-area: text3;
}

.services-s2-button3 {
    grid-area: button3;
}

.services-s2-image4 {
    grid-area: image4;
}

.services-s2-subhead4 {
    grid-area: subhead4;
    padding-top: 20px;
    color: #DB6339;
}

.services-s2-text4 {
    grid-area: text4;
}

.services-s2-button4 {
    grid-area: button4;
}

.services-s2-image5 {
    grid-area: image5;
}

.services-s2-subhead5 {
    grid-area: subhead5;
    padding-top: 20px;
    color: #DB6339;
}

.services-s2-text5 {
    grid-area: text5;
}

.services-s2-button5 {
    grid-area: button5;
}

.services-s2-image6 {
    grid-area: image6;
}

.services-s2-subhead6 {
    grid-area: subhead6;
    padding-top: 20px;
    color: #DB6339;
}

.services-s2-text6 {
    grid-area: text6;
}

.services-s2-button6 {
    grid-area: button6;
}

.services-section3 {
    background-color: #F7F8FA;
    background-image: url("../images/services-s2-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 25% 75%;
    grid-template-areas: 
      ". . . . . subhead subhead subhead subhead subhead subhead subhead"
      "card1 card1 card1 card1 card2 card2 card2 card2 card3 card3 card3 card3";
    column-gap: 24px;
    row-gap: 30px;
    padding: 306px 80px 200px 80px;
}

.services-s3-subhead {
    grid-area: subhead;
    color: #F2F0F0;
    text-align: right;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

.services-s3-c1 {
    grid-area: card1;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.services-s3-c1:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.services-s3-c1 a {
    text-decoration: none;
    color: #422219;
}

.services-s3-c2 {
    grid-area: card2;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 25px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.services-s3-c2:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.services-s3-c3 {
    grid-area: card3;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.services-s3-c3:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

/* Services CSS End */

/* Services - Local CSS Start */

.services-local-hero {
    background-color: #F7F8FA;
    background-image: url("../images/home-hero-background.png");
    background-size: cover;
    background-position: bottom;
    overflow: hidden;
    display: grid;
    height: 1100px;
    position: relative;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 6% 40% 6% 32% 16%;
    grid-template-areas: 
    "prehead prehead prehead prehead prehead prehead prehead prehead prehead prehead . ."
    "headline headline headline headline headline headline headline headline headline headline . cloud1"
    "subhead subhead subhead subhead subhead subhead subhead subhead subhead cloud2 cloud2 ."
    "phone phone phone phone phone phone phone phone . . . ."
    ". . . . . . . . . . . truck";
    column-gap: 24px;
    row-gap: 20px;
    padding: 305px 80px 205px 80px;
}

.services-local-hero-prehead {
    grid-area: prehead;
    color: #F7F8FA;
}

.services-local-hero-headline {
    grid-area: headline;
    color: #F7F8FA;
}

.services-local-hero-cloud1 {
    grid-area: cloud1;
}

.services-local-hero-subhead {
    grid-area: subhead;
    color: #F7F8FA;
}

.services-local-hero-cloud2 {
    grid-area: cloud2;
}

.services-local-hero-phone {
    grid-area: phone;
    color: #F7F8FA;
    margin-top: 10px;
}

.services-local-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 30% 48% 21%;
    grid-template-areas: 
      "subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead ."
      "text text text text text text text map map map map map"
      "button button button button button . . . . . . .";
    column-gap: 24px;
    row-gap: 50px;
    padding: 205px 80px 90px 80px;
}

.services-local-s1-subhead {
    grid-area: subhead;
    color: #DB6339;
}

.services-local-s1-text {
    grid-area: text;
    color: #29120B;
}

.services-local-s1-button {
    grid-area: button;
}

.services-local-s1-map {
    grid-area: map;
}

.services-local-section2 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 24% 38% 38%;
    grid-template-areas: 
      "subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead"
      "card1 card1 card1 card1 card1 card1 card2 card2 card2 card2 card2 card2"
      "card3 card3 card3 card3 card3 card3 card4 card4 card4 card4 card4 card4";
    column-gap: 24px;
    row-gap: 50px;
    padding: 90px 80px 490px 80px;
}

.services-local-s2-subhead {
    grid-area: subhead;
    color: #DB6339;
    text-align: center;
}

#local-card {
    background-color: #E4C06F;
    padding: 45px 45px;
}

#local-card:hover {
    background-color: #239AFF;
}

.services-local-s2-card1 {
    grid-area: card1;
    text-align: center;
}

.services-local-s2-card2 {
    grid-area: card2;
    text-align: center;
}

.services-local-s2-card3 {
    grid-area: card3;
    text-align: center;
}

.services-local-s2-card4 {
    grid-area: card4;
    text-align: center;
}

.services-local-section2 a {
    text-decoration: none;
    color: #000;
}

/* Services - Local CSS End */

/* Manitou Springs CSS Start */

.manitou-springs-section1 {
    background-color: #F7F8FA;
    background-image: url("../images/mSprings-s1-background.png");
    background-size: 1100px;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 33% 67%%;
    grid-template-areas: 
      "subhead subhead subhead subhead subhead subhead . . . . . ."
      "text text text text text text text . cloud . . .";
    column-gap: 24px;
    row-gap: 50px;
    padding: 106px 80px 300px 80px;
}

.manitou-springs-s1-subhead {
    grid-area: subhead;
    color: #DB6339;
}

.manitou-springs-s1-text {
    grid-area: text;
    color: #29120B;
}

.manitou-springs-s1-cloud {
    grid-area: cloud;
}

.manitou-springs-section2 {
    background-color: #F7F8FA;
    background-image: url("../images/home-s2-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 24% 38% 38%;
    grid-template-areas: 
      ". . . . . subhead subhead subhead subhead subhead subhead subhead"
      ". card1 card1 card1 card1 card1 card2 card2 card2 card2 card2 ."
      ". card3 card3 card3 card3 card3 card4 card4 card4 card4 card4 .";
    column-gap: 24px;
    row-gap: 50px;
    padding: 306px 80px 300px 80px;
    margin-top: -200px;
}

.manitou-springs-s2-subhead {
    grid-area: subhead;
    color: #F2F0F0;
    text-align: right;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

.manitou-springs-s2-c1 {
    grid-area: card1;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.manitou-springs-s2-c1:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.manitou-springs-s2-c2 {
    grid-area: card2;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.manitou-springs-s2-c2:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.manitou-springs-s2-c3 {
    grid-area: card3;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.manitou-springs-s2-c3:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.manitou-springs-s2-c4 {
    grid-area: card4;
    color: #422219;
    text-align: center;
    background-color: #F2F0F0;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.manitou-springs-s2-c4:hover {
    background-color: #DB6339;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.manitou-springs-section4 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 30% 30% 30% 10%;
    grid-template-areas: 
      "image1 image1 image1 image1 image1 image1 text1 text1 text1 text1 text1 ."
      ". text2 text2 text2 text2 text2 image2 image2 image2 image2 image2 image2"
      "image3 image3 image3 image3 image3 image3 text3 text3 text3 text3 text3 ."
      ". button button button button button button button button button button .";
    row-gap: 90px;
    padding: 180px 80px;
}

.localPicturesText {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border: 1px solid #422219;
    padding: 35px;
    text-align: left;
    background-color: #ffffff;
    margin: auto 0px auto -120px;
    align-items: center;
    justify-content: center;
}

.localPicturesText2 {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border: 1px solid #422219;
    padding: 45px 55px 45px 45px;
    text-align: left;
    background-color: #ffffff;
    margin: auto -120px auto 0px;
    align-items: center;
    justify-content: center;
}

.localPicture {
    max-width: 100%;
}

.manitou-springs-section4 h3 {
    color: #DB6339;
}

.manitou-springs-s4-image1 {
    grid-area: image1;
}

.manitou-springs-s4-text1 {
    grid-area: text1;
}

.manitou-springs-s4-image2 {
    grid-area: image2;
}

.manitou-springs-s4-text2 {
    grid-area: text2;
}

.manitou-springs-s4-image3 {
    grid-area: image3;
}

.manitou-springs-s4-text3 {
    grid-area: text3;
}

.manitou-springs-s4-button {
    grid-area: button;
    text-align: center;
}

.manitou-springs-section5 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 40% 60%;
    grid-template-areas: 
      "subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead"
      "card1 card1 card1 card1 card2 card2 card2 card2 card3 card3 card3 card3";
    row-gap: 60px;
    column-gap: 90px;
    padding: 90px 80px 210px 80px;
}

.manitou-springs-s5-subhead {
    grid-area: subhead;
    color: #DB6339;
    text-align: center;
}

.manitou-springs-s5-card1 {
    grid-area: card1;
    text-align: center;
}

.manitou-springs-s5-card2 {
    grid-area: card2;
    text-align: center;
}

.manitou-springs-s5-card3 {
    grid-area: card3;
    text-align: center;
}

.manitou-springs-section6 {
    background-color: #F7F8FA;
    background-image: url("../images/manitou-s6-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 12% 22% 22% 22% 22%;
    grid-template-areas: 
      ". subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead ."
      "image1 image1 image1 image1 . text1 text1 text1 text1 . . ."
      ". . text2 text2 text2 text2 text2 . image2 image2 image2 image2"
      "image3 image3 image3 image3 . text3 text3 text3 text3 text3 text3 ."
      ". text4 text4 text4 text4 text4 text4 . image4 image4 image4 image4";
    row-gap: 30px;
    padding: 180px 80px 280px 80px;
}

.localGraphic {
    max-width: 100%;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.manitou-springs-s6-subhead {
    grid-area: subhead;
    text-align: center;
    color: #F2F0F0;
}

.manitou-springs-s6-image1 {
    grid-area: image1;
}

.manitou-springs-s6-text1 {
    grid-area: text1;
    margin: auto 0px;
    text-align: left;
    color: #F2F0F0;
}

.manitou-springs-s6-image2 {
    grid-area: image2;
}

.manitou-springs-s6-text2 {
    grid-area: text2;
    margin: auto 0px;
    text-align: right;
    color: #F2F0F0;
}

.manitou-springs-s6-image3 {
    grid-area: image3;
}

.manitou-springs-s6-text3 {
    grid-area: text3;
    margin: auto 0px;
    text-align: left;
    color: #F2F0F0;
}

.manitou-springs-s6-image4 {
    grid-area: image4;
}

.manitou-springs-s6-text4 {
    grid-area: text4;
    margin: auto 0px;
    text-align: right;
    color: #F2F0F0;
}

/* Manitou Springs CSS End */

/* Services Long CSS Start */

.services-long-hero {
    background-color: #F7F8FA;
    background-image: url("../images/home-hero-background.png");
    background-size: cover;
    background-position: bottom;
    overflow: hidden;
    display: grid;
    height: 1100px;
    position: relative;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 6% 40% 6% 32% 16%;
    grid-template-areas: 
    "prehead prehead prehead prehead prehead prehead prehead prehead prehead prehead . ."
    "headline headline headline headline headline headline headline headline headline headline . cloud1"
    "subhead subhead subhead subhead subhead subhead subhead subhead subhead cloud2 cloud2 ."
    "phone phone phone phone phone phone phone phone . . . ."
    ". . . . . . . . . . . truck";
    column-gap: 24px;
    row-gap: 20px;
    padding: 305px 80px 205px 80px;
}

.services-long-hero-prehead {
    grid-area: prehead;
    color: #F7F8FA;
}

.services-long-hero-headline {
    grid-area: headline;
    color: #F7F8FA;
}

.services-long-hero-cloud1 {
    grid-area: cloud1;
}

.services-long-hero-subhead {
    grid-area: subhead;
    color: #F7F8FA;
}

.services-long-hero-cloud2 {
    grid-area: cloud2;
}

.services-long-hero-phone {
    grid-area: phone;
    color: #F7F8FA;
    margin-top: 10px;
}

.services-long-section2 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 17.5% 32.5% 50%;
    grid-template-areas: 
      "subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead"
      "card1 card1 card1 card1 card2 card2 card2 card2 card3 card3 card3 card3"
      "text text text text text text text text text text . .";
    column-gap: 24px;
    row-gap: 50px;
    padding: 90px 80px 290px 80px;
}

.services-long-s2-subhead {
    grid-area: subhead;
    color: #DB6339;
    text-align: center;
}

.services-long-s2-card1 {
    grid-area: card1;
    text-align: center;
}

.services-long-s2-card2 {
    grid-area: card2;
    text-align: center;
}

.services-long-s2-card3 {
    grid-area: card3;
    text-align: center;
}

.services-long-s2-text {
    grid-area: text;
    text-align: left;
    margin-top: 60px;
}

.services-long-s2-text h2 {
    color: #DB6339;
}

.services-long-section2 a {
    text-decoration: none;
    color: #000;
}

/* Services Long CSS End */

/* Services Seniors and Office CSS Start */

#seniors-office-icon {
    max-height: 100%;
}

.services-seniors-office-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 15% 30% 20% 20% 5% 10%;
    grid-template-areas: 
      "subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead ."
      "text text text text text text text map map map map map"
      ". card1 card1 card1 card1 card1 card2 card2 card2 card2 card2 ."
      ". card3 card3 card3 card3 card3 card4 card4 card4 card4 card4 ."
      "text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2"
      "button button button button button button button button button button button button";
    column-gap: 24px;
    row-gap: 50px;
    padding: 205px 80px 490px 80px;
}

.services-seniors-office-s1-subhead {
    grid-area: subhead;
    color: #DB6339;
}

.services-seniors-office-s1-text {
    grid-area: text;
    color: #29120B;
}

.services-seniors-office-s1-map {
    grid-area: map;
}

.services-seniors-office-s1-card1 {
    grid-area: card1;
    text-align: center;
}

.services-seniors-office-s1-card2 {
    grid-area: card2;
    text-align: center;
}

.services-seniors-office-s1-card3 {
    grid-area: card3;
    text-align: center;
}

.services-seniors-office-s1-card4 {
    grid-area: card4;
    text-align: center;
}

.services-seniors-office-s1-text2 {
    grid-area: text2;
    text-align: center;
}

.services-seniors-office-s1-button {
    grid-area: button;
    text-align: center;
}

/* Services Seniors and Office CSS End */

/* Storage CSS Start */ 


.services-storage-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 20% 38% 41%;
    grid-template-areas: 
      "subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead ."
      "text text text text text text text map map map map map"
      "button button button button button . . . . . . .";
    column-gap: 24px;
    row-gap: 50px;
    padding: 205px 80px 190px 80px;
}

.services-storage-s1-subhead {
    grid-area: subhead;
    color: #DB6339;
}

.services-storage-s1-text {
    grid-area: text;
    color: #29120B;
}

.services-storage-s1-button {
    grid-area: button;
    text-align: left;
}

.services-storage-s1-map {
    grid-area: map;
}

/* Storage CSS End */

/* Why Hire Us CSS Start */

#lm-logo {
    max-width: 100%;
}

.why-us-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
      ". text text text text text text text text text text .";
    row-gap: 60px;
    padding: 180px 80px 0px 80px;
}

.why-us-s1-text {
    grid-area: text;
    text-align: center;
}

.why-us-section2 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 10% 10% 10% 10% 10% 10% 11% 10% 10% 8%;
    grid-template-areas: 
      "image1 image1 image1 image1 . text1 text1 text1 text1 text1 text1 text1"
      "text2 text2 text2 text2 text2 text2 text2 . image2 image2 image2 image2"
      "image3 image3 image3 image3 . text3 text3 text3 text3 text3 text3 text3"
      "text4 text4 text4 text4 text4 text4 text4 . image4 image4 image4 image4"
      "image5 image5 image5 image5 . text5 text5 text5 text5 text5 text5 text5"
      "text6 text6 text6 text6 text6 text6 text6 . image6 image6 image6 image6"
      "image7 image7 image7 image7 . text7 text7 text7 text7 text7 text7 text7"
      "text8 text8 text8 text8 text8 text8 text8 . image8 image8 image8 image8"
      "image9 image9 image9 image9 . text9 text9 text9 text9 text9 text9 text9"
      "subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead";
    row-gap: 60px;
    padding: 180px 80px 480px 80px;
}

.why-us-section2 h3 {
    color: #DB6339;
}

.why-us-section2 a {
    text-decoration: none!important;
    color: #239AFF; 
}

.why-us-s2-image1 {
    grid-area: image1;
}

.why-us-s2-text1 {
    grid-area: text1;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.why-us-s2-image2 {
    grid-area: image2;
}

.why-us-s2-text2 {
    grid-area: text2;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.why-us-s2-image3 {
    grid-area: image3;
}

.why-us-s2-text3 {
    grid-area: text3;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.why-us-s2-image4 {
    grid-area: image4;
}

.why-us-s2-text4 {
    grid-area: text4;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.why-us-s2-image5 {
    grid-area: image5;
}

.why-us-s2-text5 {
    grid-area: text5;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.why-us-s2-image6 {
    grid-area: image6;
}

.why-us-s2-text6 {
    grid-area: text6;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.why-us-s2-image7 {
    grid-area: image7;
}

.why-us-s2-text7 {
    grid-area: text7;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.why-us-s2-image8 {
    grid-area: image8;
}

.why-us-s2-text8 {
    grid-area: text8;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.why-us-s2-image9 {
    grid-area: image9;
}

.why-us-s2-text9 {
    grid-area: text9;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.why-us-s2-subhead {
    grid-area: subhead;
    margin: auto 0px;
    text-align: center;
    color: #DB6339;
}


/* Why Hire Us CSS End */

/* Cheats and Tips CSS Start */ 

.cheats-tips-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 16.67% 16.67% 16.67% 16.67% 16.67% 16.67%;
    grid-template-areas: 
      "image1 image1 image1 image1 . text1 text1 text1 text1 text1 text1 text1"
      "text2 text2 text2 text2 text2 text2 text2 . image2 image2 image2 image2"
      "image3 image3 image3 image3 . text3 text3 text3 text3 text3 text3 text3"
      "text4 text4 text4 text4 text4 text4 text4 . image4 image4 image4 image4"
      "image5 image5 image5 image5 . text5 text5 text5 text5 text5 text5 text5"
      "text6 text6 text6 text6 text6 text6 text6 . image6 image6 image6 image6";
    row-gap: 60px;
    padding: 180px 80px 280px 80px;
}

.cheats-tips-section1 h3 {
    color: #DB6339;
}

.cheats-tips-section1 a {
    text-decoration: none!important;
    color: #239AFF; 
}

.cheats-tips-s1-image1 {
    grid-area: image1;
}

.cheats-tips-s1-text1 {
    grid-area: text1;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.cheats-tips-s1-image2 {
    grid-area: image2;
}

.cheats-tips-s1-text2 {
    grid-area: text2;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.cheats-tips-s1-image3 {
    grid-area: image3;
}

.cheats-tips-s1-text3 {
    grid-area: text3;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.cheats-tips-s1-image4 {
    grid-area: image4;
}

.cheats-tips-s1-text4 {
    grid-area: text4;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.cheats-tips-s1-image5 {
    grid-area: image5;
}

.cheats-tips-s1-text5 {
    grid-area: text5;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

.cheats-tips-s1-image6 {
    grid-area: image6;
}

.cheats-tips-s1-text6 {
    grid-area: text6;
    margin: auto 0px;
    text-align: left;
    color: #29120B;
}

/* Cheats and Tips CSS Start */

/* Play horizontal CSS Start */

/* Horizontal page wrapper */
.horizontal-page {
    overflow-x: auto; /* Allow horizontal scrolling */
    overflow-y: hidden; /* Remove vertical scrolling */
    width: 100vw;  /* Viewport width */
    height: 100vh; /* Viewport height */
    scroll-snap-type: x mandatory; /* Enable horizontal snap */
    scroll-behavior: smooth; /* Smooth scroll for the whole container */
    display: flex; /* Set container for horizontal scrolling */
}

/* Scene containing all sections */
.scene {
    display: flex;
    flex-direction: row;
    width: calc(100vw * 10); /* Total width based on number of sections */
    height: 100vh;
    background: url("../images/play-background.png") repeat-x; /* Set the background */
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* Individual sections */
.level-1,
.level-2,
.level-3,
.level-4,
.level-5,
.level-6,
.level-7,
.level-8,
.level-9,
.level-10 {
    width: 100vw; /* Full width per section */
    height: 100vh; /* Full screen height */
    scroll-snap-align: start; /* Snap to the start of each section */
    background-size: cover;
}

/* Truck element styling */

.fixedTruck {
    position: fixed; /* Keep the truck centered */
    left: 38%;
    bottom: 10.5%; /* Adjust as needed */
    transform: translateX(-50%);
    width: 150px; /* Adjust size */
    height: auto; /* Ensure height is flexible */
    background-size: contain;
    z-index: 99; /* Ensure truck stays above all other elements */
    pointer-events: none; /* Ignore pointer events to prevent accidental hiding */

}


.level-1 {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 30% 70%;
    grid-template-areas: 
        ". . . . . . . clouds1 clouds1 clouds1 clouds1 clouds1"
        ". . . headline headline headline headline headline headline . . .";
    row-gap: 60px;
    padding: 60px 80px 280px 80px;
}

.play-s1-headline {
    grid-area: headline;
    color: #fff;
    text-align: center;
}

.level-2 {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        "headline headline headline headline headline headline headline headline headline headline headline headline";
    row-gap: 60px;
    padding: 140px 80px 280px 80px;
}

.play-s2-headline {
    grid-area: headline;
    color: #fff;
    text-align: left;
}

.level-3 {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        "image image image headline headline headline headline headline headline headline headline headline";
    row-gap: 60px;
    padding: 140px 80px 280px 80px;
}

.play-s3-headline {
    grid-area: headline;
    color: #fff;
    text-align: left;
}

.play-image1 {
    grid-area: image;
}

#play-image1 {
    max-width: 85%;
}

.level-4 {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        "headline headline headline headline headline headline headline headline image image image image";
    row-gap: 60px;
    padding: 160px 80px 280px 80px;
}

.play-s4-headline {
    grid-area: headline;
    color: #fff;
    text-align: left;
}

.play-image2 {
    grid-area: image;
}

.level-5 {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        "image1 image1 headline headline headline headline headline headline headline headline image2 image2";
    row-gap: 60px;
    padding: 140px 80px 280px 80px;
}

.play-s5-headline {
    grid-area: headline;
    color: #fff;
    text-align: center;
}

.play-image3 {
    grid-area: image1;
}

.play-image4 {
    grid-area: image2;
}

#play-image2 {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.level-6 {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        "headline headline headline headline headline headline headline headline image image image .";
    row-gap: 60px;
    padding: 160px 80px 280px 80px;
}

.play-s6-headline {
    grid-area: headline;
    color: #fff;
    text-align: left;
}

.play-image5 {
    grid-area: image;
}

.level-7 {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        "headline headline headline headline headline headline headline headline headline headline headline .";
    row-gap: 60px;
    padding: 160px 80px 280px 80px;
}

.play-s7-headline {
    grid-area: headline;
    color: #fff;
    text-align: left;
}

.level-8 {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        ". . headline headline headline headline headline headline headline headline headline headline";
    row-gap: 60px;
    padding: 160px 80px 280px 80px;
}

.play-s8-headline {
    grid-area: headline;
    color: #fff;
    text-align: right;
}

.level-9 {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        "headline headline headline headline headline headline headline headline headline headline image image";
    row-gap: 60px;
    padding: 160px 80px 280px 80px;
}

.play-s9-headline {
    grid-area: headline;
    color: #fff;
    text-align: left;
}

.level-10 {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 20% 80%;
    grid-template-areas: 
        "headline headline headline headline headline headline headline headline headline headline headline headline"
        ". credits credits credits credits credits credits credits credits credits credits .";
    row-gap: 60px;
    padding: 160px 0px 280px 0px;
}

.play-s10-headline {
    grid-area: headline;
    color: #fff;
    text-align: center;
}

/* Credits screen styling */
.credits-screen {
    grid-area: credits;
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden; /* Hide the content that’s outside the viewport */
    background-color: #000; /* Background color for a classic credits look */
    color: #fff; /* White text for good contrast */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    margin-top: 60px;
}

.credits-container {
    position: absolute;
    bottom: -100%;
    width: 50vw;
    text-align: center;
    animation: scrollCredits 90s linear infinite; /* Adjust duration to fit your needs */

}

.credits-content {
    font-family: 'Press Start 2P', cursive; /* Retro game font for a fun style */
    padding: 20px;
    line-height: 1.8;
}

/* Keyframes to move the credits upwards */
@keyframes scrollCredits {
    0% {
        bottom: -330%;
    }
    100% {
        bottom: 100vh;
    }
}



  
/* Play horizontal CSS End */

/* Footer CSS Start */

.footer {
    background-color: #1F1A17;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
      "map map map map logo logo logo logo . text text text";
      row-gap: 50px;
    padding: 150px 80px;
}

.footer-image {
    grid-area: map;
}

.footer-logo {
    grid-area: logo;
}

.footer-text {
    grid-area: text;
    color: #F7F8FA;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Footer CSS End */


@media (max-width: 1024px) {



    h1 {
        font-family: "Press Start 2P", system-ui;
        font-size: 28px;
        line-height: 1.4;
    }
    
    h2 {
        font-family: "Play", sans-serif;
        font-size: 26px;
        line-height: 1.2;
    }
    
    h3 {
      font-family: "Play", sans-serif;
        font-size: 22px;  
        line-height: 1.2;
    }
    
    h4 {
      font-family: "Play", sans-serif;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 300;
    }
    
    h5 { /* Press Start 2p subhead */
        font-family: "Press Start 2P", system-ui;
        font-size: 12px;
        line-height: 1.4;
    }
    
    p {
      font-family: "Play", sans-serif;
        font-size: 16px;
        line-height: 1.4;
    }
    
    
    .topNav .navWhy-us, .topNav .navCheats-tips, .topNav .navPlay, .topNav .navServices {
        display: none;
    }

    .navButton {
        display: none;
    }
    
    
    .topNav.scrolled {
        background-color: rgba(35, 154, 255, 0.95) !important;
        transition: background-color 200ms linear;
      }     

    .topNav {
        display: grid;
        justify-content: center;
        align-items: center;
        padding: 15px;
        background-color: rgba(35, 154, 255, 0.95) !important;
        position: fixed;
        width: 100vw;
        height: 70px;
        z-index: 99;
        grid-template-columns: 50% 45% 5%;
        grid-template-rows: 100%;
        grid-template-areas: 
          "logo hamburger .";
        margin: 0;
        padding: 0;
    }
        
    .logo {
        display: none;
    }
    
    .mobile-logo {
        display: block;
        position: absolute;
        max-height: 70px;
    }
    
    .mobileNav {
        display: block;
        
    }
    
    .menuItem {
        display: block;
        margin: 2rem 2rem;
        font-size: 1.8rem;
        font-family: 'Raleway', sans-serif;
        color: white;
        text-decoration: none;
    }
    
    .menuItem2 {
        display: block;
        margin: 0.5rem 2rem;
        font-size: 1rem;
        font-family: 'Raleway', sans-serif;
        color: white;
        text-decoration: none;
    }
    
    .material-icons {
        background-color: transparent;
        color: #ffffff;
    }
    
    .hamburger {
        position: fixed;
        z-index: 100;
        top: 1rem;
        right: 1rem;
        padding: 4px;
        cursor: pointer;
    }
    
    .closeIcon {
        display: none;
        font-family: 'Raleway', sans-serif;
        font-size: 22px;
        text-align: left;
        margin-right: 5px;
    }
    
    .menu {
        position: fixed;
        transform: translateY(-100%);
        transition: transform 0.2s;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background-color: rgba(35, 154, 255, 0.95) !important;
        color: white;
        list-style: none;
        padding-top: 4rem;
    }
    
    .showMenu {
        transform: translateY(0);
        background-color: rgba(35, 154, 255, 0.95) !important;
        color: #ffffff;
        backdrop-filter: blur(50px);
    }
    
    .menuIcon {
        padding: 0;
        margin: 0;
        background-color: transparent;
        border: 0;
        font-size: 22px;
        text-align: center;
    }
    
    .noDecoration {
        text-decoration: none;
        color: #ffffff;
        font-size: 18px;
        font-family: 'Raleway', sans-serif;
        line-height: 1.4;
    }

    #long-image1 {
        max-width: 65%;
    }


.home-hero {
    background-color: #F7F8FA;
    background-image: url("/images/home-hero-background.png");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: grid;
    height: 1000px;
    position: relative;
    justify-content: center;
    grid-template-columns: 90% 10%;
    grid-template-rows: 3% 29% 11% 5% 1% 50%;
    grid-template-areas: 
    "prehead prehead"
    "headline cloud1"
    "subhead cloud2"
    "cta cta"
    "phone phone"
    ". truck";
    column-gap: 24px;
    row-gap: 60px;
    padding: 155px 20px 330px 20px;
}

#bitTruck {
    position: absolute;
    top: 50%; /* Center vertically within the container */
    right: 30px; /* Start slightly off-screen to the right */
    transform: translateY(-50%);
    transition: transform 0.1s linear;
}

.home-section1 {
    background-color: #F7F8FA;
    background-image: url("../images/home-s1-background.png");
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: top right;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 70% 30%;
    grid-template-rows: 25% 51% 23%;
    grid-template-areas: 
      "subhead ."
      "text cloud"
      "button button";
    column-gap: 24px;
    row-gap: 50px;
    padding: 106px 20px;
}

.home-section2 {
    background-color: #F7F8FA;
    background-image: url("../images/home-s2-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 7% 15.5% 15.5% 15.5% 15.5% 15.5% 15.5%;
    grid-template-areas: 
      "subhead"
      "card1"
      "card2"
      "card3"
      "card4"
      "card5" 
      "card6";
    column-gap: 24px;
    row-gap: 50px;
    padding: 600px 20px 400px 20px;
    margin-top: -330px;
}

.home-s2-subhead {
    grid-area: subhead;
    color: #F2F0F0;
    text-align: right;
    text-shadow: 2px 4px 16px rgba(0, 0, 0, 1);
}

.home-section3 {
    background-color: #F7F8FA;
    background-image: url("../images/home-s3-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 4% 12% 12% 12% 12% 12% 12% 12% 12%;
    grid-template-areas: 
      "subhead"
      "card1" 
      "card2" 
      "card3" 
      "card4"
      "card5" 
      "card6" 
      "card7" 
      "card8";
    column-gap: 24px;
    row-gap: 50px;
    padding: 206px 20px 450px 20px;
}

.home-s3-subhead {
    grid-area: subhead;
    color: #F7F8FA;
    text-align: left;
    background-color: transparent;
}

.home-section4 {
    background-color: #F7F8FA;
    background-image: url("../images/home-s4-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 25% 75%;
    grid-template-areas: 
      "coins"
      "text";
    row-gap: 30px;
    padding: 556px 20px 650px 20px;
    margin-top: 190px;
}

#coin1 {
    max-width: 18%;
    margin: 0;
    padding: 0;
    animation: jumpInfinite 2.5s infinite;
    position: relative;
}

.home-s4-coins {
    grid-area: coins;
    text-align: center!important;
    position: absolute;
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%);
    margin-top: 30px;
}

.home-section5 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 10% 40% 50%;
    grid-template-areas: 
      "subhead"  
      "image"
      "text";
    row-gap: 50px;
    padding: 106px 20px 100px 20px;
    margin-top: 90px;
}

#packedTruck {
    max-width: 250px;
    border-radius: 100%;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.end-cta {
    background-color: #F7F8FA;
    background-image: url("../images/cta-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 5% 55% 15% 25%;
    grid-template-areas: 
      "clouds1"
      "text"
      "clouds2"
      "truck";
    row-gap: 50px;
    padding: 506px 20px 290px 20px;
    margin-top: 90px;
    margin-bottom: 0;
}

.animated-wrapper2 {
    display: none;
}

.animated-wrapper-mobile {
    display: block;
}

#cloud2 {
    max-width: 110%;
    margin: 0;
    padding: 0;
    animation: jumpInfinite2 3.5s infinite;
}

#bitTruckRight {
    position: absolute;
    top: 50%; /* Center vertically within the container */
    right: -380px;
    transform: translateY(0%);
    transition: transform 0.1s linear;
    bottom: 0%;
}

/* Services Mobile CSS Start */

.services-hero {
    background-color: #F7F8FA;
    background-image: url("../images/home-hero-background.png");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: grid;
    height: 900px;
    position: relative;
    justify-content: center;
    grid-template-columns: 90% 10%;
    grid-template-rows: 3% 23% 1% 14% 58%;
    grid-template-areas: 
    "prehead cloud1"
    "headline ."
    "subhead cloud2"
    "phone phone"
    ". truck";
    column-gap: 24px;
    row-gap: 40px;
    padding: 155px 20px 130px 20px;
}

.services-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 70% 30%;
    grid-template-rows: 25% 41% 33%;
    grid-template-areas: 
      "subhead ."
      "text map"
      "button button";
    column-gap: 24px;
    row-gap: 50px;
    padding: 106px 20px;
}

.services-section2 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    align-items: space-around;
    grid-template-columns: 100%;
    grid-template-rows: repeat(6, 2.5% 2.5% 2.5% 9%);
    /* 6.5% 3.5% 4.5% 2% 6.5% 3.5% 4.5% 2% 6.5% 3.5% 4.5% 2% 6.5% 3.5% 4.5% 2% 6.5% 3.5% 4.5% 2% 6.5% 3.5% 4.5% 2% */
    grid-template-areas: 
      "subhead1"
      "text1"
      "button1"
      "image1"
      "subhead2"
      "text2"
      "button2"
      "image2"
      "subhead3"
      "text3"
      "button3"
      "image3"
      "subhead4"
      "text4"
      "button4"
      "image4"
      "subhead5"
      "text5"
      "button5"
      "image5"
      "subhead6"
      "text6"
      "button6"
      "image6";
    column-gap: 24px;
    row-gap: 30px;
    padding: 60px 20px 705px 20px;
}

.services-section3 {
    background-color: #F7F8FA;
    background-image: url("../images/services-s2-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 7% 31% 31% 31%;
    grid-template-areas: 
      "subhead"
      "card1"
      "card2"
      "card3";
    column-gap: 24px;
    row-gap: 30px;
    padding: 606px 80px 200px 80px;
    margin-top: -300px;
}

.services-s3-subhead {
    grid-area: subhead;
    color: #F2F0F0;
    text-align: center;
    text-shadow: 2px 4px 16px rgba(0, 0, 0, 1);
}

/* Services Mobile CSS End */

/* Services - Local Mobile CSS Start */

.services-local-hero {
    background-color: #F7F8FA;
    background-image: url("../images/home-hero-background.png");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: grid;
    height: 900px;
    position: relative;
    justify-content: center;
    grid-template-columns: 90% 10%;
    grid-template-rows: 3% 23% 1% 14% 58%;
    grid-template-areas: 
    "prehead cloud1"
    "headline headline"
    "subhead cloud2"
    "phone phone"
    ". truck";
    column-gap: 24px;
    row-gap: 40px;
    padding: 155px 20px 130px 20px;
}

.services-local-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 15% 23% 41% 20%;
    grid-template-areas: 
      "subhead"
      "map"
      "text"
      "button";
    column-gap: 24px;
    row-gap: 50px;
    padding: 106px 20px 60px 20px;
}

.services-local-section2 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 12% 22% 22% 22% 22%;
    grid-template-areas: 
      "subhead"
      "card1" 
      "card2"
      "card3" 
      "card4";
    column-gap: 24px;
    row-gap: 30px;
    padding: 90px 20px 190px 20px;
}

/* Services - Local Mobile CSS Start */




/* Manitou Springs CSS Start */

.manitou-springs-section1 {
    background-color: #F7F8FA;
    background-image: url("../images/mSprings-s1-background.png");
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 90% 10%;
    grid-template-rows: 33% 67%%;
    grid-template-areas: 
      "subhead subhead"
      "text cloud";
    column-gap: 24px;
    row-gap: 30px;
    padding: 106px 20px 240px 20px;
    z-index: 99;
}

.manitou-springs-section2 {
    background-color: #F7F8FA;
    background-image: url("../images/home-s2-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 8% 23% 23% 23% 23%;
    grid-template-areas: 
      "subhead"
      "card1" 
      "card2"
      "card3" 
      "card4";
    column-gap: 24px;
    row-gap: 30px;
    padding: 256px 20px 300px 20px;
    margin-top: -130px;
    z-index: 1;
}

.manitou-springs-section4 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 15% 15% 15% 15% 15% 15% 10%;
    grid-template-areas: 
      "image1"
      "text1"
      "image2"
      "text2"
      "image3"
      "text3"
      "button";
    row-gap: 30px;
    padding: 180px 20px 90px 20px;
}

.localPicturesText {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border: 1px solid #422219;
    padding: 35px;
    text-align: left;
    background-color: #ffffff;
    margin: -90px 60px 60px 60px;
    align-items: center;
    justify-content: center;
}

.localPicturesText2 {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border: 1px solid #422219;
    padding: 45px 55px 45px 45px;
    text-align: left;
    background-color: #ffffff;
    margin: -90px 60px 60px 60px;
    align-items: center;
    justify-content: center;
}

.manitou-springs-section5 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 20% 20% 20% 20% 20%;
    grid-template-areas: 
      "subhead"
      "card1" 
      "card2" 
      "card3";
    row-gap: 60px;
    column-gap: 90px;
    padding: 90px 20px 210px 20px;
}

.manitou-springs-section6 {
    background-color: #F7F8FA;
    background-image: url("../images/manitou-s6-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 6% 6% 18% 6% 18% 6% 18%;
    grid-template-areas: 
      "subhead"
      "text1"
      "image1"
      "text2"
      "image2"
      "text3"
      "image3"
      "text4"
      "image4";
    row-gap: 30px;
    padding: 180px 20px 380px 20px;
}

.manitou-springs-s6-text1, .manitou-springs-s6-text2, .manitou-springs-s6-text3, .manitou-springs-s6-text4 {
    text-align: center;
}

/* Services - Long Distance Mobile CSS Start */

.services-long-hero {
    background-color: #F7F8FA;
    background-image: url("../images/home-hero-background.png");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: grid;
    height: 900px;
    position: relative;
    justify-content: center;
    grid-template-columns: 90% 10%;
    grid-template-rows: 3% 34% 1% 4% 56%;
    grid-template-areas: 
    "prehead cloud1"
    "headline headline"
    "subhead cloud2"
    "phone phone"
    ". truck";
    column-gap: 24px;
    row-gap: 40px;
    padding: 155px 20px 130px 20px;
}

.services-long-section2 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 8% 16% 16% 16% 44%;
    grid-template-areas: 
      "subhead"
      "card1" 
      "card2" 
      "card3"
      "text";
    column-gap: 24px;
    row-gap: 50px;
    padding: 90px 20px 90px 20px;
}

/* Services Seniors and Office Mobile CSS Start */

.services-seniors-office-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 10% 11% 21% 12% 12% 12% 12% 5% 5%;
    grid-template-areas: 
      "subhead"
      "text"
      "map"
      "card1" 
      "card2"
      "card3"
      "card4"
      "text2"
      "button";
    column-gap: 24px;
    row-gap: 50px;
    padding: 180px 20px 390px 20px;
}

/* Services Seniors and Office Mobile CSS End */

/* Storage Mobile CSS Start */ 


.services-storage-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 12% 30% 36% 21%;
    grid-template-areas: 
      "subhead"
      "text"
      "map"
      "button";
    column-gap: 24px;
    row-gap: 50px;
    padding: 180px 20px 60px 20px;
}

.services-storage-s1-button {
    grid-area: button;
    text-align: center;
}

/* Storage Mobile CSS End */

/* Why Hire Us Mobile CSS Start */

.why-us-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: 
      "text";
    row-gap: 60px;
    padding: 180px 20px 0px 20px;
}

.why-us-section2 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 6% 5% 5% 5% 5% 5% 8%;
    grid-template-areas: 
      "text1"
      "image1"
      "text2"
      "image2"
      "text3"
      "image3"
      "text4"
      "image4"
      "text5"
      "image5"
      "text6"
      "image6"
      "text7"
      "image7"
      "text8"
      "image8"
      "text9"
      "image9"
      "subhead";
    row-gap: 60px;
    padding: 90px 20px 880px 20px;
}

/* Why Hire Us Mobile CSS End */


/* Cheats and Tips Mobile CSS Start */ 

.cheats-tips-section1 {
    background-color: #F7F8FA;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33%;
    grid-template-areas: 
      "image1"
      "text1"
      "image2"
      "text2"
      "image3"
      "text3"
      "image4"
      "text4"
      "image5"
      "text5"
      "image6"
      "text6";
    row-gap: 60px;
    padding: 180px 20px 480px 20px;
}

/* Cheats and Tips Mobile CSS End */ 

/* Footer Mobile CSS Start */

.footer {
    background-color: #1F1A17;
    overflow: hidden;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 100%;
    grid-template-rows: 17% 41% 41%;
    grid-template-areas: 
      "text"
      "logo"
      "map";
      row-gap: 50px;
    padding: 80px 30px 100px 30px;
}

#footerLogo {
    max-width: 75%;
}

#csMap {
    max-width: 75%;
}

.footer-image {
    grid-area: map;
    text-align: center;
}

.footer-logo {
    grid-area: logo;
    text-align: center;
}

/* Footer Mobile CSS End */

}