<style>

body,html {



    height: 100%;

    margin: 0;

}



.hero-image {

  background-image: url("../images/ff4.jpg");

  height: 100%;

  opacity: 0.95;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

}

.hero-text1{

  position: absolute;

  top: 1%;

  left: 55%;

  color: rgb(255,192,0);

  font-weight: bold;

  font-size: 18px;

}

.hero-text2{

  text-align: left;

  position: absolute;

  top: 10%;

  left: 10%;

  color: black;

  font-size: 16px;



}

.hero-text {

  text-align: center;

  position: relative;

  top: 60%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: black;

}



.hero-text button {

  border: 2px;

  outline: 0;

  display: inline-block;

  padding: 10px 25px;

  color: black;

  background-color: #ddd;

  text-align: center;

  cursor: pointer;

}

.fa1 {

  padding: 20px;

  left: 300px;

  font-size: 30px;

  width: 50px;

  text-align: center;

  text-decoration: none;

  margin: 5px 5px;

  

}



.fa1:hover {

    opacity: 0.7;

}



.fa1-facebook {

  background: #3B5998;

  color: white;

}



.hero-text button:hover {

  background-color: #555;

  color: yellow;

}

.parallax { 

    /* The image used */

    background-image: url("../images/ff3.jpg");



    /* Full height */

    height: 80%; 



    /* Create the parallax scrolling effect */

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}

.parallax1 { 

    /* The image used */

    background-image: url("../images/ff4.jpg");



    /* Full height */

    height: 100%; 



    /* Create the parallax scrolling effect */

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}

.lineab {



    border-style: solid;

    border-width: 1px;

    color: grey;

}

.lineab1 {



    border-style: solid;

    border-width: 1px;

    color: black;

}

.lineabc {



    border-style: solid;

    border-width: 6px;

    color: rgb(255,192,0);

}

.photo1 { 

    /* The image used */

    background-image: url("../images/f7.jpg");



    /* Full height */

    height: 25%; 

    width: 100%;



    /* Create the parallax scrolling effect */

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}

.photo2 {

  background-image: url("../images/f7.jpg");

  height: 25%;

  opacity: 0.95;

  width: 100%;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

}



.myBtn {

    display: show; /* Hidden by default */

    position: fixed; /* Fixed/sticky position */

    bottom: 0px; /* Place the button at the bottom of the page */

    right: 0px; /* Place the button 30px from the right */

    z-index: 99; /* Make sure it does not overlap */

    border: none; /* Remove borders */

    outline: none; /* Remove outline */

    background-color:black; /* Set a background color */

    color: rgb(255,98,1); /* Text color */

    cursor: pointer; /* Add a mouse pointer on hover */

    padding: 5px; /* Some padding */

    border-radius: 10px; /* Rounded corners */

}



.myBtn:hover {

    background-color: grey; /* Add a dark-grey background on hover */

    color: rgb(255,98,1);

}



</style>