/* TJ Mullen */
/*{ outline: 1px solid red;}*/
/* Pre-determined Constraints */
body,
header,
nav,
main,
footer,
h1,
div,
img,
ul,
li,
ol,
figure,
figcaption,
section,
article,
aside,
audio,
video,
footer {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Header */
header {
    background-color:  #FFFAFA;
}
/* Navigation Bar Styling */
/* Add a black background color to the top navigation */
.topnav {
    position: sticky;
    top: 0;
    overflow: hidden;
    background-color: #333333;
    font-family: "DM Serif Text", serif; 
}
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}
/* Change the color of links on hover */
.topnav a:hover, .dropbtn {
  background-color: #676767;
  color: white;
}
/* Change the color of links on hover */
.topnav a:hover, .dropbtn {
  background-color: #676767;
  color: white;
}
/* Dropdown color when hovering */
.dropdown-content a:hover {
  background-color: #676767;
}
/* Dropdown display W/ Button */
.dropdown-content {
  display: block;
}
/* Dropdown display W/ Button */
.dropdown-content {
  display: block;
}
/* Add an active class to highlight the current page */
.active {
    background-color: rgb(255, 99, 71);
    color: white;
}
/* Index Main Content Area */
/* Main Area Background Color */
main {
    background-color:  #BDBDBD
}
/* Main Image */
.main-image {
    position: relative;
    text-align: center;
}
/* image h2 image */
.main-image h2 {
    font-size: 50px;
    color: white;
}
/* custom Omage Size */
.cust-images {
    max-width: 100%;
    height: auto;
}
/* Row Setting */
.row {
    padding: 0;
    margin: 0;
}
/* desktop view */
.desktop-view {
    display: none;
}
.center-description {
    text-align: center;
    font-size: 22px;
}
/* Paragraph Styling */
.center-paragraph {
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* Paragraph Styling */
.title-left-paragraph {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
}
/* Paragraph Styling */
.left-paragraph {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}
/* Paragraph Styling */
.title-right-paragraph {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
}
/* Paragraph Styling */
.right-paragraph {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}
/* Card Body Style */
.card-body {
    margin-left: 25px;
}
/* Accoordion Setting */
.accordion {
    margin-bottom: 5px;
}
/* Main index Section h1 title */
.h1-center-title {
    font-family: "DM Serif Text", serif; 
    text-align: center;
    padding-top: 5px;
    margin-left: 20px;
}
/* Form Margin */
#consultForm {
    margin: 25px;
}
/* Carousel Icons */
.carousel-control-prev-icon, .carousel-control-next-icon {
  filter: invert(1);
}
/* Make the slideshow images fully responsive */
.carousel-inner img {
    max-width: 100%;
    height: auto;
}
/* Hotal Container */
.hotal-container {
    margin-bottom: 20px;
}
/* Hotal Container Img */
.hotal-container img {
    border-bottom: 20%;
    border-radius: 5%;
    max-width: 100%;
    height: auto;
}
/* List Paragraph */
.list-paragraph {
    text-align: center;
    font-size: 22px;
    margin-top: 10px;
    padding-bottom: 20px; 
}
/* List Paragraph ul */
.list-paragraph ul {
  text-indent: 5px;
  list-style-type: none;
}
/* Caption Text */
.caption-text {
    text-align: center;
}
/* Slogan Section */
.slogan {
    font-size: 22px;
    text-align: center;
    font-style: italic;
}
/* Rpw Margin */
.row-margin {
    margin-left: 15px;
    margin-right: 15px;
}
/* Footer Area */
/* Soical Media Table */

/* Icon Bar */
.icon-bar {
    text-align: center;
    font-size: 30px;
    padding: 5px;
    color:  #FFFAFA;
}
/* Icon Bar Hover */
.icon-bar a:hover {
    background-color: #003B6D;
}
/* Social Media icons */
/* Facebook */
.facebook {
    padding: 5px;
    background: #3B5998;
    color: white;
}
/* Twitter */
.twitter {
    padding: 5px;
    background: #55ACEE;
    color: white;
}
/* Google */
.google {
    padding: 5px;
    background: #dd4b39;
    color: white;
}
/* Linkedin */
.linkedin {
    padding: 5px;
    background: #007bb5;
    color: white;
}
/* Youtube */
.youtube {
    padding: 5px;
    background: #bb0000;
    color: white;
}
/* Fooooter Address */
.footer-address {
    text-align: left;
    color: white;
    padding: 0;
    margin: 0;    
}
/* Footer Text */
.footer-text {
    color: white;
    font-size: 22px;
}
/* Fooooter Links li */
.footer-links li {
    list-style-type: none;
    display: block;
}
/* Fooooter Links Hover */
.fotter-links a:hover {
    color: rgb(255, 99, 71);
}
/* Fotter index links a element */
.fotter-links a {
    font-size: 20px;
    color: grey;
    list-style-type: none;
}
/* Fooooter Links ul */
.footer-links ul{
    margin-bottom: 5px;
}
/* Cotainer li */
.container li {
    margin: 0;
}
/* Footer Links */
.footer-links{
    margin-bottom: 25px;
}
/* Footer */
footer {
    background-color: #333333;
    padding-top: 1px;
}
/* Form Placeholder Transparent */
body{background:black}
input{height:30px;opacity:.5;}
input::placeholder { /* Standard for most modern browsers */
    color: black;
    opacity: 0.5;
}
/* Custom Button Primary Color */
.btn-primary {
    background-color: rgb(255, 99, 71); /* Example: Tomato red */
    border-color: rgb(255, 99, 71);
    color: white; /* Adjust text color for contrast */
}
/* Consider hover, focus, and active states for a complete look */
.btn-primary:hover {
    background-color: rgb(220, 20, 60); /* Example: Crimson on hover */
    border-color: rgb(220, 20, 60);
}
.btn-primary:focus, .btn-primary:active {
    background-color: rgb(220, 20, 60) !important; /* Use !important if needed */
    border-color: rgb(220, 20, 60) !important;
    box-shadow: none !important; /* Remove default blue focus shadow */
}
/* Custom Button Secondary Color */
.btn-secondary {
    background-color: #333333; /* Example: Tomato red */
    border-color: #333333;
    color: white; /* Adjust text color for contrast */
}
/* Media Query When the screen is less than 239 pixels wide */
@media screen and (max-width: 239px) {
    /* Icon Bar */
    .icon-bar {
        font-size: 20px;
    }
}
/* Media Query When the screen is less than 390 pixels wide */
@media screen and (max-width: 390px) {
    /* Main Image */
    .main-image h2 {
        font-size: 10px;
    }
    /* Book Now */
    #booknow {
        font-size: 8px;
    }
}
/* Media Query When the screen is less than 500 pixels wide */
@media screen and (min-width: 500px) {
    .mobile-contant {
        display: none;
    }
    /* Main Padding Setting */
    .main-padding-space {
        height: 60px;
        background-color: #FFFAFA;
    }
}
/* Media Query When the screen is greater than 500 pixels wide */
@media screen and (max-width: 500px) {
    /* Desktop View */
    .desktop-contant {
        display: none;
    }
    /* Main Padding Setting */
    .main-padding-space {
        height: 30px;
        background-color: #FFFAFA;
    }
}
/* Media Query When the screen is less than 704 pixels wide */
@media screen and (max-width: 704px) {
    /* Navbar Section */
    .topnav a:not(:first-child), .dropbtn {
        display: none;
    }
    .topnav a:not(:first-child), .dropbtn {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
    This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
    .topnav.responsive {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .active_custom_dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
}
/* Media Query When the screen is greater than 786 pixels wide */
@media screen and (min-width: 768px) {
    /* Mobile View */
    .mobile-view {
        display: none;
    }
    /* Desktop View */
    .desktop-view {
        display: block;
    }
}
/* Media Query When the screen is less than 768 pixels wide */
@media screen and (max-width: 768px) {
    /* Fooooter Address */
    .footer-address {
        text-align: center;
    }
    /* Left and Right Paragraph margin */
    .left-paragraph, .right-paragraph {
        margin-bottom: 15px;
    }
    /* Mobile View */
    .mobile-view {
        display: block;
    }
}
/* Media Query When the screen is greater than 802 pixels wide */
@media screen and (max-width: 802px) {
    .paragraph {
        font-size: 15px; 
    }
}
/* Media Query When the screen is greater than 9991 pixels wide */
@media screen and (max-width: 991px) {
    /* Icon Bar */
    .icon-bar {
        font-size: 25px;
    }
}
/* Media Query When the screen is greater than 1300 pixels wide */
@media screen and (min-width: 1300px) {
    .paragraph {
        font-size: calc(1rem + 1vw); 
    }
}
/* Media Query that have booth min and max width */
/* Media Query When the screen is greater than 391 pixels wide and max of 586 */
@media screen and (min-width: 391px) and (max-width: 586px) {
    /* Main Image */
    .main-image h2 {
        font-size: 15px;
    }
    /* Book Now */
    #booknow {
        font-size: 13px;
    }
}
/* Media Query When the screen is greater than 587 pixels wide and max of 977 */
@media screen and (min-width: 587px) and (max-width: 977px) {
    .main-image h2 {
        font-size: 15px;
    }
    /* Book Now */
    #booknow {
        font-size: 12px;
    }
}
/* Media Query When the screen is greater than 978 pixels wide and max of 1367 */
@media screen and (min-width: 978px) and (max-width: 1367px) {
    .main-image h2 {
        font-size: 25px;
    }
}
/* Media Query When the screen is greater than 1368 pixels wide and max of 1953 */
@media screen and (min-width: 1368px) and (max-width: 1953px) {
    .main-image h2 {
        font-size: 35px;
    }
}