@import url("http://fonts.googleapis.com/css?family=Roboto:400,300,700");

body {
/*    background-image: url("../assets/Background.jpg"); */ 
    font-family: 'Roboto', sans-serif !important;
    background-color: #341100;
}

.container {
    max-width: 1024px;
    --bs-gutter-x: 0;
}

.profile-image {
    Float: left;
    margin: 0 20px 0 0;
}

.org-Logo-Med {
  display: inline-block;
  min-width: 150px;
  max-width:  250px;
}

.org-Logo-Large {
  display: inline-block;
  min-width: 250px;
  max-width:  350px;
}

.services-text h2 {
    margin-top: 18px;
}

.services-text h1 {
    font-weight: 600;
    margin-top: 18px;
    margin-bottom: 12px;
}

.carousel-caption {
  background:  rgba(0,0,0,.5);
  right: 0;
  bottom: 0;
  left: auto;
  text-align: right;
  padding: 5px 10px;
  flex-shrink: 1;
}

/* Following is for the focus image with title and buttons */

.focus-image-wrapper {
    position:  relative;
}

.focus-image-overlay {
    position:  relative;
    transform:  translate(0, -175px);
}

.centered-element {
    left: auto;
    right:  auto;
}

.wrapper-title {
    color:  white;
    font-size:  40px;
    text-shadow:  2px 2px 3px black;
}


.contact-button {
    --bs-btn-bg: #9ac9bc;
    --bs-btn-color: white;
    --bs-btn-hover-border-color:  white;
    --bs-btn-hover-bg:  #9ac9bc;
    --bs-btn-border-width:  3px;    
    --bs-btn-hover-color:  white;
}

.req-appt-button {
    --bs-btn-bg: #005487;
    --bs-btn-color: white;
    --bs-btn-hover-border-color:  white;
    --bs-btn-hover-bg:  #005487;
    --bs-btn-border-width:  3px;
    --bs-btn-hover-color:  white;
}


.standard-body {
    background-color: #995532;
    color: white;
    padding: 2vw 6vw;
 /*   padding: 10px 30px;  */
    font-size: large;
}

.standard-body p {
    padding-bottom: 10px;
}

.standard-body a {
    color: white;
}

.standard-body h1 {
    font-variant:  small-caps;

}

.contact-button {
    margin-top:  20px;
    margin-left: 20px;
}

.contact-me {
    background-color: #995532;
    color: white;
    padding: 10px;  

}

.my-footer-container {
    background-color:  #802B00;
    color:  white;
}

.footer-row {
    min-height: 60px !important;
    align-items:  center;
    margin-left:  12px;
}


.footer-row a {
    color:  white;
}

.footer-row a:hover {
    color: #9ac9bc;
}


/* Following is for submenu functionality and styling */
/* change the background color */
.navbar-custom {
    background-color: #802B00;
    padding-left: 10px;
}


.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #ffcc00;
    font-size:  medium;
}


/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: white;
    padding:0.5em 2em;
    font-size: large !important;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    border-radius: 10px;
    background-color: #662200;}

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu {
    background-color: #993300;
}

/* dropdown item text color */
.navbar-custom .navbar-nav .dropdown-item {
    color: white;
}

/* dropdown item hover or focus */
.navbar-custom .navbar-nav .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown-item:focus {
    color: #eeeeee;
    background-color: #005487;
}





/*  Code fromfor multi-level dropdown from https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/   */
/*  If only using single-level dropdown, this code can be removed                                                */

.dropdown:hover >.dropdown-menu{
  display: block !important;
}
.dropdown-submenu:hover > .dropdown-menu{
  display: block !important;
    left: 100%;
    margin-top: -37px;
}

.dropdown-item{
  font-size: small; /* 13px */
}
.dropdown-toggle::after{
  margin-bottom: -2px;
}
.dropdown-menu li a.active{
  color:#fff;
}

.custom-toggle-arrow{
      font-size: 18px;
      margin-top: 1px;
      line-height: 12px;
}


/*  Further CSS code from multi-level dropdown */

.dropdown-menu li {
position: relative;
}
.dropdown-menu .dropdown-submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
right:100%;
left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
display: block;
}