/* Change this breakpoint if you change the breakpoint of the navbar */

@media (min-width: 992px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform:translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}

/* Other styles for the page not related to the animated dropdown */

body.OLD {
  background: #007bff;
  background: linear-gradient(to right, #0062E6, #33AEFF);
}

body {
  background: #ffffff;
}

header.masthead2024 {
  position: relative;
  background-color: #343a40;
  background: url("../img/Peinert_Web_Landing_2024.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 30rem;
  padding-bottom: 2rem;
}

header.masthead {
  position: relative;
  background-color: #343a40;
  background: url("../img/Phantom-2025-Index-version 2-Export.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 30rem;
  padding-bottom: 2rem;
}

header.masthead2 {
  position: relative;
  background-color: #343a40;
  background: url("../img/p26_stern_qtr_full_7777.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 30rem;
  padding-bottom: 2rem;
}

header.masthead3 {
  position: relative;
  background-color: #343a40;
  background: url("../img/zephy_red-white-side_7266.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 30rem;
  padding-bottom: 2rem;
}

header.masthead4 {
  position: relative;
  background-color: #343a40;
  background: url("../img/x25_bow_wing_1-2000.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 30rem;
  padding-bottom: 2rem;
}

header.masthead5 {
  position: relative;
  background-color: #343a40;
  background: url("../img/dolphin_4c-2000.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 30rem;
  padding-bottom: 2rem;
}


header.masthead6 {
  position: relative;
  background-color: #343a40;
  background: url("../img/p26-strip_7813.jpg") no-repeat center center;
  background-size: auto;
  padding-top: 0rem;
  padding-bottom: 0rem;
}



header.masthead6 .overlay {
  position: absolute;
  background-color: #212529;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
}



header.masthead .overlay {
  position: absolute;
  background-color: #212529;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
}

header.masthead h1 {
  font-size: 2rem;
}






/* Table styles*/

.bs-example{
    	margin: 20px 80px 20px 80px;
}
.bs-example a{
    color: white;
}

.bs-example-text {
    color: white;
}

.bs-example {
 background-color: #1C3340;
}


/* Responsive Google map*/
.map-responsive{
    overflow:hidden;
    padding-bottom:25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:400px;
    width:100%;
    position:absolute;
}

#conatcat-info{
    padding: 25px;
}

#contact-page{
    padding: 25px;
}


/* Table styles*/

/* Background color override*/

.bg-light{
    background-color: #FFFFFF !important;
}


 /* Optional custom styles for alignment and spacing */
        .table-container {
            margin: 20px; /* Add some margin around the table */
            overflow-x: auto;  /* Enable horizontal scrolling for small screens */
        }
        .table th, .table td {
            vertical-align: middle; /* Vertically center the cell content */
            padding: 0.75rem; /* Add padding, same as default, for consistency */
        }
        .table thead th {
            font-size: 0.9rem; /* Reduce header font size if needed */
            font-weight: bold;
            color: #FFFFFF; /* set the color to black */
        }
        .table tbody td {
            font-size: 0.8rem; /* Reduce body font size if needed */
        }
        @media (max-width: 768px) { /* Medium screens and smaller */
            .table-responsive {
                overflow-x: auto; /* Enable horizontal scrollbar */
                display: block;
                width: 100%;
            }
            .table {
                width: 100%;
                max-width: none;
            }
        }