:root {
    background-color: rgb(230, 227, 227);
    }
  
  
    .headerContainer {
      background-color: rgb(230, 227, 227);
    }

/*.mainHeaderRow {
    margin-left: 6% !important;
    width: 80%;
    align-items: center;
    justify-content: center !important;
    margin-top: 50px !important;
    display: flex;
    gap: 1rem;
    text-align: center !important;
    padding-bottom: 50px;
}*/


.headerContent {
    background-color: rgb(230, 227, 227);
  text-align: center;
  padding-bottom: 45px;
  padding-top: 50px;
    color: rgb(188, 67, 19) !important;
}

.headerContent h4 {
    margin-top: 20px;
    color: gray;
}

.headerContent p {
    font-size: 23px;
}

.headerContent hr {
    width: 90%;
    margin-left: 5%;
}

#headerNamePhotoId {
    margin-top: -95px;
}

.col a:hover {
    color: grey;
    text-decoration: underline rgb(188, 67, 19) !important; 
  }
  
  .col-md-4 h5:hover {
    text-decoration: rgb(188, 67, 19) !important; 
  }


.notesContent {
    background-color: rgb(230, 227, 227); 
padding-bottom: 10px;
}
.notesContent li{
    margin-right: 18%;
 margin-left: 21%;
 font-size: 22px;
 font-weight: 600;
}


.notesContent p{
    margin-right: 14%;
 margin-left: 15%;
 font-size: 22px;
 text-align: left;
}

.backToContact a {
   
    font-family: "Birthstone", cursive;
    font-size: 50px;
    color: rgb(188, 67, 19) !important;
}

.backToContact {
    text-align: center;
    background-color: rgb(230, 227, 227);
}
.footerWrapper {
    background-color: rgb(230, 227, 227);
  }
    
    .footerContainer {
      justify-content: center;
      width: 80%;
      font-size: 20px;
      margin-left: 12.25%;
      padding-top: 35px;
    }
    
    .footerRow {
      justify-content: center;
      
    }
    
    .footerContainer a {
        color: rgb(188, 67, 19) !important;
    }
    #backToTop {
        position: fixed; /* Fixed position */
        bottom: 30px;    /* 10px from the bottom */
        right: 30px;     /* 10px from the right */
        z-index: 9999;   /* Make sure it's on top of other content */
        padding: 8px 16px; /* Padding for size */
        background-color: #666; /* Background color */
        color: white; /* Text color */
        border: none; /* No border */
        cursor: pointer; /* Cursor indicates it's clickable */
        border-radius: 5px; /* Rounded corners */
        opacity: 0.3; /* Slightly transparent */
        display: none; /* Hidden by default */
        transition: opacity 0.5s ease; /* Smooth transition for opacity */
      }
      
      #backToTop.visible {
        display: block; /* Show the button */
      }
      
      #backToTop.hidden-opacity {
        opacity: 0.3; /* Slightly transparent */
      }
      
      #backToTop:hover {
        opacity: 1; /* Fully visible when hovered */
      }
      
      
      @media (max-width: 576px){
      
        .row{
          display: flex;
          flex-direction: column;
        }
      
        .imageContainer h1 {
          justify-content: center;
        
          padding-right: 15px;
          padding-left: 20px;
          text-align: center !important;
      
        }
        #backToTop {
            position: fixed; /* Fixed position */
            bottom: 30px;    /* 10px from the bottom */
            right: 30px;     /* 10px from the right */
            z-index: 9999;   /* Make sure it's on top of other content */
            padding: 8px 16px; /* Padding for size */
            background-color: #666; /* Background color */
            color: white; /* Text color */
            border: none; /* No border */
            cursor: pointer; /* Cursor indicates it's clickable */
            border-radius: 5px; /* Rounded corners */
            opacity: 0.3; /* Slightly transparent */
            display: none; /* Hidden by default */
            transition: opacity 0.5s ease; /* Smooth transition for opacity */
        }
        
        #backToTop.visible {
            display: block; /* Show the button */
        }
        
        #backToTop.hidden-opacity {
            opacity: 0.3; /* Slightly transparent */
        }
        
        #backToTop:hover {
            opacity: 1; /* Fully visible when hovered */
        }
        
      
      }