/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

    padding-top: 3rem;

    padding-bottom: 3rem;

    color: #5a5a5a;

  }

  

  

  /* CUSTOMIZE THE CAROUSEL

  -------------------------------------------------- */

  

  /* Carousel base class */

  .carousel {

    margin-bottom: 4rem;

  }

  /* Since positioning the image, we need to help out the caption */

  .carousel-caption {

    bottom: 3rem;

    z-index: 10;

    background: rgba(0, 0, 0, 0.6);

    padding: 1.25rem;

    border-radius: 0.5rem;

  }

  

  /* Declare heights because of positioning of img element */

  .carousel-item {

    height: 42rem;

  }

  .carousel-item > img {

    position: absolute;

    top: 0;

    left: 0;

    min-width: 100%;

    height: 42rem;

    object-fit: cover;

  }

  

  

  /* MARKETING CONTENT

  -------------------------------------------------- */

  

  /* Center align the text within the three columns below the carousel */

  .marketing .col-lg-4 {

    margin-bottom: 1.5rem;

    text-align: center;

  }

  .marketing h2 {

    font-weight: 400;

  }

  .marketing .col-lg-4 p {

    margin-right: .75rem;

    margin-left: .75rem;

  }

  

  

  /* Featurettes

  ------------------------- */

  

  .featurette-divider {

    margin: 5rem 0; /* Space out the Bootstrap <hr> more */

  }

  

  /* Thin out the marketing headings */

  .featurette-heading {

    font-weight: 300;

    line-height: 1;

    letter-spacing: -.05rem;

  }

  

  

  /* RESPONSIVE CSS

  -------------------------------------------------- */

  

  @media (min-width: 40em) {

    /* Bump up size of carousel content */

    .carousel-caption p {

      margin-bottom: 1.25rem;

      font-size: 1.25rem;

      line-height: 1.4;

    }

  

    .featurette-heading {

      font-size: 50px;

    }

  }

  

  @media (min-width: 62em) {

    .featurette-heading {

      margin-top: 7rem;

    }

  }

  

  /* Make carousel height responsive on mobile */

  .carousel-item {

    height: 32rem;

  }

  

  @media (max-width: 992px) {

    .carousel-item {

      height: 20rem; /* Shorter height on mobile */

    }

    

    .carousel-item > img {

      height: 20rem;

    }

    

    .carousel-caption {

      bottom: 1.5rem; /* Move caption closer to bottom on mobile */

      padding: 1rem;

    }

    

    .carousel-caption p {

      font-size: 1rem;

      margin-bottom: 0.5rem;

    }

    

    .btn-lg {

      padding: 0.5rem 1rem;

      font-size: 1rem;

    }

  }

  

  /* Improve caption readability */

  .carousel-caption {

    background: rgba(0, 0, 0, 0.7); /* Darker, more consistent background */

    border-radius: 4px;

    padding: 1rem;

  }

  

  /* Add these navbar styles */

  .navbar {

    padding: 0.5rem 0;

    background: rgba(33, 37, 41, 0.98) !important;

  }

  .navbar-brand {

    font-family: 'Brush Script MT', cursive;

    padding: 0;

  }

  .navbar-brand h3 {

    font-size: 1.75rem;

    margin: 0;

  }

  .navbar .nav-link {

    padding: 0.5rem 1rem;

    font-size: 1rem;

  }

  .navbar .contact-info {

    text-align: right;

    font-size: 0.9rem;

  }

  .navbar .contact-info p {

    line-height: 1.2;

  }

  .navbar .contact-info i {

    margin-right: 0.25rem;

  }

  @media (max-width: 992px) {

    .navbar-collapse {

      padding: 1rem 0;

    }

    

    .navbar .contact-info {

      text-align: left;

      padding: 1rem 0 0.5rem;

      border-top: 1px solid rgba(255,255,255,0.1);

      margin-top: 0.5rem;

    }

    

    .navbar-nav {

      margin-bottom: 0 !important;

    }

  }

  

  /* Dropdown styling */

  .navbar .dropdown-menu {

    margin-top: 0;

    border: none;

    border-radius: 0;

    background: rgba(33, 37, 41, 0.98);

  }

  .navbar .dropdown-item {

    color: rgba(255,255,255,0.8);

    padding: 0.5rem 1rem;

  }

  .navbar .dropdown-item:hover,

  .navbar .dropdown-item:focus {

    background: rgba(255,255,255,0.1);

    color: #fff;

  }

  

  /* Modern modal styling */

  .modal-content {

    border: none;

    border-radius: 8px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

  }

  .modal-header {

    border-bottom: 1px solid rgba(0,0,0,0.1);

    padding: 1.5rem;

  }

  .modal-body {

    padding: 1.5rem;

  }

  .modal-footer {

    border-top: 1px solid rgba(0,0,0,0.1);

    padding: 1rem 1.5rem;

  }

  @media (max-width: 768px) {

    .modal-dialog {

      margin: 0.5rem;

    }

  }

  

  /* Responsive tables */

  @media (max-width: 768px) {

    .table {

      display: block;

      width: 100%;

      overflow-x: auto;

      -webkit-overflow-scrolling: touch;

    }

    

    .table td, 

    .table th {

      min-width: 200px;

    }

  }

  

  /* Modern button styling */

  .btn-primary {

    padding: 0.5rem 1.5rem;

    border-radius: 4px;

    transition: all 0.2s ease;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  }

  .btn-primary:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 6px rgba(0,0,0,0.15);

  }

  @media (max-width: 768px) {

    .btn {

      padding: 0.4rem 1.2rem;

      font-size: 0.9rem;

    }

  }

  

  /* Smooth scrolling and spacing */

  html {

    scroll-behavior: smooth;

  }

  .marketing {

    padding: 2rem 0;

  }

  @media (max-width: 768px) {

    .marketing {

      padding: 1rem 0;

    }

    

    .marketing .col-lg-4 {

      margin-bottom: 2rem;

    }

  }

  

  /* Modern footer */

  .footer {

    padding: 1rem 0;

    margin-bottom: 3rem;

  }

  .footer p {

    margin-bottom: 0;

    font-size: 0.9rem;

  }

  @media (max-width: 768px) {

    .footer {

      margin-bottom: 4rem;

    }

  }

  

  /* Add this to your existing CSS */

  .table td span {

    color: #28a745; /* Bootstrap's default green color */

  }

  

  /* Add navbar phone number styles */

  @media (max-width: 768px) {

    .navbar .d-flex.flex-column p {

      margin-bottom: 0.25rem;

    }

    

    .navbar .d-flex.flex-column {

      align-items: flex-start;

      padding: 0.5rem 0;

    }

  }

  

  /* Add dropdown hover functionality */

  @media (min-width: 1024px) {

    .navbar .dropdown:hover > .dropdown-menu {

      display: block;

    }

  }