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

/*.mainHeaderRow {
    margin-left: 5% !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;
}


.headerContent h4 {
    font-size: 35px !important;
    /* margin-top: 20px; */
    color: black;
    padding-bottom: 40px;
}

.headerContent hr {
   padding-bottom: 30px;
}

.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; 
  }

#initialArea {
    font-weight: 700;
    /* margin-bottom: 50px; */
}

.notesContent {
    background-color: rgb(230, 227, 227);
    text-align: left;
    padding-bottom: 10px;
}

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

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

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

.backToContact {
    text-align: center;
}

.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 */
        }
        
      
      }