.opening {
    width: 100%;
    background-image: url('../images/carHome2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 350px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.russell{
    text-align: center;
    font-weight: bold;
    text-shadow: 0 0 8px white, 0 0 8px white, 0 0 8px white, 0 0 8px white;
    color: black;
}

#russellP{
    font-size: 22px;
}


.openingCar {
    width: 100%;
    background-image: url('../images/WASH.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 300px; 
    display: flex;
    /* flex: 1;  */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* margin: 0 10px; */
}

.openingBoat {
    width: 100%;
    background-image: url('../images/boatWheel.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 300px; 
    display: flex;
    /* flex: 1;  */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 50px;
}

.carBoat{
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 20px;
    margin-right: 20px;
    max-width: 100%;

    gap: 20px;
    
}

.carBoat, a{
  /* width: 100%; */
  flex: 1;
}

.openingMap {
    display: grid;
    grid-template-columns: 60% 40%;
    overflow: hidden;
   
}

#contactBox{
        display: grid;
        grid-template-columns: 60% 40%;
        overflow: hidden;
        background-color: rgb(235, 235, 235);
}

#contact{
 display: flex;
    flex-direction: column;
    margin: 15px;
    justify-content: center;
    text-align: center;
}

#contact h2{
    text-align: center;
}

#mail{
    width: 75%;
}

#contact textarea{
    display:block;
    width: 75%;
    margin: auto;
}

#range{
    display: grid;
    align-items: center;
    margin: 15px;
    /* vertical-align: middle; */
}

#range p label{
    display:block;
}

.button{
    background-color: red;
    color: white;
    border: 2px solid rgb(192, 192, 192);
    border-radius: 9px;
    text-decoration: none;
    padding: 5px 10px;
    font-size: 12px;
    margin: 15px;
    width: 70px;
  }

.map{
    background-image: url('../images/map.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 300px; 
}



#gallery1{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
    flex-shrink: 2;
  }

  #gallery2{
    display: none;
    align-items: center;
    justify-content: space-around;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
    flex-shrink: 2;
  }

  #gallery img{
    display: flex;
    justify-content: space-between;
    min-width: 295px;
  }

  #galleryTitle {
    margin: 40px;
    text-align: center;
  }

  .gallerypic{
    width: 20%;
    height: 300px;
  }

  .pictureheader{
    /* display:inline-block; */
    text-align: center;
    font-size: 22px;
    margin: 5px;

  }

  #arrow{
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }

  #arrowRight{
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }

  #arrow2{
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }

  #arrowRight2{
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }

  #one{
    background-image: url('../images/Before\ 1.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    max-width: 100%;
  }

  #one:hover{
    background-image: url('../images/After\ 1.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    max-width: 100%;

  }

  #two{
    background-image: url('../images/before\ 2.png');
    background-repeat: no-repeat;
  background-size: cover;
  height: 300px;

  }

  #two:hover{
    background-image: url('../images/After\ 2.png');
    max-width: 100%;
  }

  #three{
    background-image: url('../images/Before\ 3.png');
    background-repeat: no-repeat;
  background-size: cover;
  height: 300px;

  }

  #three:hover{
    background-image: url('../images/After\ 3.png');
    max-width: 100%;
  }

  #four{
    background-image: url('../images/Before\ 4.png');
    background-repeat: no-repeat;
  background-size: cover;
  height: 300px;

  }

  #four:hover{
    background-image: url('../images/After\ 4.png');
    max-width: 100%;
  }

  #five{
    background-image: url('../images/Before\ 5.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
  }

  #five:hover{
    background-image: url('../images/After\ 5.png');
    max-width: 100%;
  }

  #six{
    background-image: url('../images/Before\ 6.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
  }

  #six:hover{
    background-image: url('../images/After\ 6.png');
    max-width: 100%;
  }

  #seven{
    background-image: url('../images/Before\ 7.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
  }

  #seven:hover{
    background-image: url('../images/After\ 7.png');
    max-width: 100%;
  }

  #eight{
    background-image: url('../images/Before\ 8.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
  }

  #eight:hover{
    background-image: url('../images/After\ 8.png');
    max-width: 100%;
  }
 

/* .openingSatellite {
    width: 100%;
    background-image: url('../images/satellite.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
} */