*{
  box-sizing: border-box;
}

html {
  background-color: #ffffff;
  padding: 0px;
}
body {    
  padding: 0px;
  margin: 0px;
  max-width: 100%;
}
  
form {
  background-color: #eeeeee;
  border-color:#cccccc;
  border-width: 3px;
  border-style: solid;
  padding: 20px;
  border-radius: 10px;
}

footer {
  background-color: orangered;
  padding:20px;
  /* border: green 1px solid; */
}
footer p {
  color:#ffffff;
  text-align: left;
  font-size: small;
}

h1 {
  font-family: "Roboto", sans-serif;
  color: #333333;
  text-transform: uppercase;
  padding-left: 5%;  
}
h2 {
  font-family: "Roboto", sans-serif;
  font-size:30px;
  padding: 0;
  margin-top:0px;
  margin-bottom: 10px;
  color: #333333; 
  border-bottom: orangered solid 5px;
}
h3 {
  font-family: "Roboto", sans-serif;
  font-size:20px;
  padding: 0;
  margin-top:0px;
  margin-bottom: 5px;
  color: #333333; 
}

header
{
    background-image: url('assets/header-bg.jpg');
    /* background-size: cover; */
    background-position: center;
    /* background-attachment: fixed; */
    /* background-attachment: fixed; */
    height: 500px;
    color: white;
    text-align: center;
    /* border: green 1px solid; */
    margin-bottom:20px;    
}
p {
    /* text-align: justify; */
    text-align:left;
}
/* text elements */
p, li
{
    font-family: "Comfortaa", sans-serif;
    font-style: normal;
    line-height: 1.5;
    color: #333333;
    margin-top: 0;
    margin-bottom: 20px;
}
/* form elements */
input, textarea
{
  font-family: "Roboto", sans-serif;
  font-style: normal;
  line-height: 1.5;
  color: #b99a45;
  margin-top: 0;
  margin-bottom: 10px;
}
section {
  display: block;
  overflow: auto;
  width:100%;
  margin-bottom:20px;
  padding:15px;
  /* border: orange 1px solid; */
}

/*
*
*       CONTACT FORM
*
*/
#contact-form {
  margin:auto;
  margin-bottom: 20px;  
  /* border: 1px yellow solid;   */
}
#contact-form textarea,
#contact-form input {
  color:#111111;
  padding:10px;
  width:100%;
}
#contact-form input[type="submit"],
#contact-form input[type="button"] {
  width:100%;
  background-color: #333333;
  color: white;
  font-size: larger;
  padding: 10px 20px;
  /* font-weight: bold;   */
  border-radius: 5px;
}
#contact-form input[type="submit"]:hover,
#contact-form input[type="button"]:hover {
  cursor: pointer;
}
.formLabel {  /* needs to be moved into contact form css and probable from id to class */
  font-family: "Roboto", sans-serif;
  font-style: normal;
  line-height: 1.5;
  color: #666666;
  margin-top: 0;
  margin-bottom: 5px;
}

/*
*
*       BACK TO TOP NAVIGATION
*
*/
.back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333333;
  font-family: "Roboto", sans-serif;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  z-index: 1000;
}
.back-to-top:hover {
  background-color: #0056b3;
}

.back-to-wild-hearts-creative {
  display: block;
  position: fixed;
  bottom: 60px;
  right: 20px;
  background-color: #333333;
  font-family: "Roboto", sans-serif;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  z-index: 1000;
}
.back-to-wild-hearts-creative:hover {
  background-color: #0056b3;
}

/*
*
*       BACKGROUND EFFECT CLASSES
*
*/
.bg-hard-section {
   /* Set the height of the section to fill the viewport */
  /* height: 100vh; */
  background-image: url('assets/bg-test.jpg'); /* Replace 'your-background-image.jpg' with the path to your image */
  background-size: cover; /* Cover the entire section with the background image */
  background-attachment: fixed; /* Make the background image fixed */
}
.bg-opaque-white {
  background-color: rgba(255, 255, 255, 0.5);
}

/*
*
*       FONT FORMATTING
*
*/
.f-color-white,
.f-color-white p,
.f-color-white h1,
.f-color-white h2,
.f-color-white h3 {
  color: #ffffff;
}

/*
*
*       IMAGE FORMATTING
*
*/
.i-max-width-300 {
  max-width:300px;
}
.i-section-feature {
  width:100%;
  border:#333333 solid 1px;
  height: auto;
  animation: moveIn 3s forwards; /* Animation properties */
}


/*
*
*       CONTACT US LINK
*
*/
.link-contact,
.link-contact a {
  display: inline-block;
  background-color: #333333;
  font-family: "Roboto", sans-serif;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  margin-bottom:20px;
}


/*
*
*       LOGO
*
*/
.logo {
  width:150px;
}

/*
*
*       MARGIN
*
*/
.m-10 {
  margin:10px;
}
.m-b-10 {
  margin-bottom:10px;
}
.m-l-10 {
  margin-left:10px;
}
.m-r-10 {
  margin-right:10px;
}
.m-t-10 {
  margin-top:10px;
}
.m-20 {
  margin:10px;
}
.m-b-20 {
  margin-bottom:10px;
}
.m-l-20 {
  margin-left:10px;
}
.m-r-20 {
  margin-right:10px;
}
.m-t-20 {
  margin-top:10px;
}


/*
*
*       MENU
*
*/
.menu-container {
  display: none;
  position: fixed;
  /* top: 155px; */
  top: 0;
  left: 0;
  width: 100%;
  /* height: calc(100% - 155px); */
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.9); */
  background-color: #FFFFFF;
  z-index: 99;
  vertical-align: middle;
  /* border: red 1px solid; */
}
.menu-container-inside {
  display:flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 100%;
  height: 100%;
  /* z-index: 2; */
  vertical-align: middle;
  /* border: yellow 1px solid; */
}
.menu {
  width:370px;
  margin:auto;
  padding:20px;
}
.menu a {
  font-weight: bold;
  font-size: larger;
  color: #ffffff;
  text-decoration: none;
}
.menu li {
  padding:20px;
  font-family: "Roboto", sans-serif;
  font-size: large;
  text-transform: uppercase;
  background-color: orangered;    
  border-radius: 5px;
}
.menu ul {
  padding:0px;
  /* padding-top:20px; */
  list-style-type: none;
  text-align: center;
}
.menu-icon {
  display: inline-block;
  cursor: pointer;
  width: 30px;
  height: 20px;
  position: relative;
  margin:5px;
  margin-bottom: 10px;
}
.menu-icon-2-position {
  float:right;
  top: 10px;
  right: 10px;
}
.menu-icon .bar {
  display: block;
  background-color: #333333;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  transition: transform 0.3s ease;
}
.menu-icon .bar:not(:last-child) {
  margin-bottom: 6px;
}
.menu-icon.open .bar:first-child {
  transform: translateY(10px) rotate(45deg);
}
.menu-icon.open .bar:nth-child(2) {
  opacity: 0;
}
.menu-icon.open .bar:last-child {
  transform: translateY(-10px) rotate(-45deg);
}

/*
*
*       MESAGE FORMATTING
*
*/
.message-success {
  display:inline-block;
  border: greenyellow solid 5px;
  padding:10px;
  margin-bottom:10px;
}

/*
*
*       PADDING
*
*/
.padding-0 {
  padding:0;
}

/*
*
*       PAGE CONTENT CONTAINER
*
*/
.page-content-container {
  /* border: red solid 1px; */
  border:none;
}


  
/*
*
*       TAGLINE
*
*/
.tagline-header {
  /* padding-top:220px; */
  top:50%;
  font-family: "Fugaz One", sans-serif;
  font-weight:900;
  text-transform: uppercase;
  color:#ffffff;
  font-size: 50px;
  animation: moveIn 2s forwards; /* Animation properties */
  /* border: yellow solid 1px; */
}
.tagline-footer {
  font-family: "Fugaz One", sans-serif;
  font-weight:900;
  text-transform: uppercase;
  color:#ffffff;
  font-size: 50px;
  text-align: center;
  /* border: yellow solid 1px; */
}

/*
*
*       TESTIMONIALS
*
*/
.testimonial {
  background-color: #eeeeee;
  font-size:smaller;
  border: #cccccc solid 3px;
  border-radius: 5px;
  padding:30px;
  margin-bottom:20px;
}
.testimonial p {
  font-style: italic;  
  text-align: justify;
}
.testimonial-customer {
  font-weight: bold;
  margin-bottom:0;
}

/*
*
*       WIDTH
*
*/
.width-full {
  width:100% !important;
}

/*
*
*       KEYFRAMES
*
*/
@keyframes moveIn {
  from {
    transform: translateX(-100%); /* Start from outside the container */
  }
  to {
    transform: translateX(0); /* Move to original position inside the container */
  }
}

/*
*
*   All development is mobile-first. Therefore all @media tags are for changes when the website is TABLET or DESKTOP size.
*
*/
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* CSS rules for tablets */
  section {
    width:62%;
    margin:auto;
  }  
  .tagline-header {
    font-size: 90px;
  }
}
@media only screen and (min-width: 1025px) {
  /* CSS rules for laptops/desktops */
  section {
    width:62%;
    margin:auto;
  }
  .tagline-header {
    font-size: 130px;
  }
}