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

/* Header */
header {
    background-color:  #FFFAFA;
}

/* Header Image */
.header-image img{
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 15%;
}

/* Navigation Bar Styling */
/* Add a black background color to the top navigation */
.topnav {
    overflow: hidden;
    background-color: #003B6D;
    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;
}

/* Dropdown float Setting */
.active_custom_dropdown {
    background-color: #6699CC;
    color: white;
    float: left;
    overflow: hidden;
}

/* Dropdown float Setting */
.custom_dropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown settings with Button */
.custom_dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Dropdown settings with Button */
.active_custom_dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Dropdown Content Setting */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #003B6D;
    min-width: 160px;
    z-index: 1;
}

/* Dropdown links Setting */
.dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: "DM Serif Text", serif; 
}

/* Change the color of links on hover */
.topnav a:hover, .custom_dropdown:hover .dropbtn {
  background-color: #676767;
  color: white;
}

/* Change the color of links on hover */
.topnav a:hover, .active_custom_dropdown:hover .dropbtn {
  background-color: #676767;
  color: white;
}


/* Dropdown color when hovering */
.dropdown-content a:hover {
  background-color: #676767;
}
/* Dropdown display W/ Button */
.custom_dropdown:hover .dropdown-content {
  display: block;
}

/* Dropdown display W/ Button */
.active_custom_dropdown:hover .dropdown-content {
  display: block;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #6699CC;
    color: white;
}

/* Search Bar Styling */
.search-bar-desktop {
    display: flex;
    float: right;
    padding: 0.375rem 0.75rem;
    margin-left: auto; /* This will push the element to the right */
}

/* Search Bar Box Styling */
.form-control-desktop {
    background-color: #BDBDBD;
    color: white;
}

/* Search Bar Button Styling */
.btn-desktop {
    background-color: #6699CC;
    color: white;
    border: none;
}

/* Search Bar Mobile Styling */
.topnav-mobile {
    display: none;
}

/* Index Main Content Area */

/* Main Area Background Color */
main {
    background-color:  #FFFAFA
}

/* Main index Section slogan */
.slogan {
    font-size: 22px;
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-style: italic;
    color: #003B6D;
}

/* Main index Section h1 title */
.h1-title {
    font-family: "DM Serif Text", serif; 
    text-align: left;
    margin-top: 5px;
    padding-top: 5px;
    margin-left: 20px;
}

/* Custom Link Styling */
.cust-table {
    background-color: #BDBDBD;
}
/* Custom Link Styling */
.list-group-item {
    background-color: #676767;
    color: white;
}

/* Change hover background for list-group items */
.list-group-item:hover {
  background-color: #003B6D;
}

 /* Main index 3rd Section W/ Popular Cities */
.popular-animals{
    position: relative;
    background-color: #003B6D;
 }

/* Main index 3rd Section city-gallery div */
.animal-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 auto;
    padding: 20px;
    justify-items: center;
    align-items: start;
}

/* Main index 3rd Section image */
.animal-images img {
    margin: 0 auto;
    max-width: 520px;  /* adjust per section if needed */
    height: auto;
    border-radius: 10px;
    padding:  50px;
    margin-left: 0;
}

/* Main index 3rd Section image */
.animal-image img {
    border-bottom: 20px;
    border-radius: 5%;
    min-width: 220px;
    height: 150px;
}

/* Main index 3rd Section image hover */
.animal-image img:hover {
    opacity: 0.6;
}

/* Main index Section h2 title */
.h2-center-title {
    font-size: 14px;
    color: white;
    text-align: center;
    margin-top: 0;
    padding-top: 20px;
 }

/* Paragraph Styling */
.center-paragraph {
    font-size: 30px;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Paragraph Styling */
.paragraph {
    font-size: 22px;
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Paragraph Styling */
.left-paragraph {
    font-size: 30px;
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Paragraph Styling */
.paragraph {
    font-size: 22px;
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* List Paragraph Styling */
.list-paragraph{
    margin-left: 60px;
    font-size: 20px;
    text-align: left;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-indent: 5px;
}

.center-content {
    text-align: center;
}

/* Left List Paragraph Styling */
.mobile-list-paragraph {
    display: none;
}

/* Request Consultation Section */
.request-consultation {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* Request Consultation Paragraph */
.request-paragraph {
    font-size: 20px;
}

/* Main index Section h1 title */
.h1-center-title {
    font-family: "DM Serif Text", serif; 
    text-align: center;
    margin-top: 5px;
    padding-top: 5px;
    margin-left: 20px;
}

span.highlighter {
    color: red;
}

span.highlighter-bold {
    font-weight: bold;
}

#consultForm {
    margin: 25px;
}

/* Footer Area */

/* Soical Media Table */
/* Icon Bar */

.icon-bar {
    text-align: center;
    font-size: 30px;
    padding: 5px;
    color:  #FFFAFA;
    background-color: #BDBDBD;
}

.icon-bar a:hover {
    background-color: white;
}

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

/* Fotter index links */
.footer_links {
    background-color: #003B6D;
    padding: 18px;
    text-align: center;
    margin-bottom: 0;
}

/* Fotter index links a element */
.footer_links a {
    font-size: 20px;
    color: white;
    padding: 25px;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Media Query When the screen is less than 260 pixels wide */
@media screen and (max-width: 260px) {
    /* Navigation Columns Responsiveness */
    .popular-animals {
        display: none;
    }
}

@media screen and (max-width: 430px) {
    /* Search Bar Styling */
    .topnav-mobile{
        display: none;
    }
}

@media screen and (max-width: 530px) {

    .animal-images {
        display: none;
    }
}

/* Media Query When the screen is less than 600 pixels wide */
@media screen and (max-width: 600px) {
    /* Navbar Section */
    .topnav a:not(:first-child), .custom_dropdown .dropbtn {
        display: none;
    }
    .topnav a:not(:first-child), .active_custom_dropdown .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 .custom_dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .custom_dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
    .topnav.responsive .active_custom_custom_dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .active_custom_dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }

    /* Navigation Columns Responsiveness */
    .animal-gallery {
        grid-template-columns: 1fr;
    }
}

/* Media Query when the screen is greater than 550 and less than 750 pixels wide*/
@media screen and (min-width: 550px) and (max-width: 750px) {

    /* Popular Cities Down to two Columns */
    .animal-gallery {
        grid-template-columns: repeat(2, 1fr);
        margin-left: 25px;
        padding-right: 0;
    }
}

/* Media Query When the screen is less than 990 pixels wide */
@media screen and (min-width: 290px) and (max-width: 1098px) {
    /* Navigation Columns Responsiveness */
    .topnav-mobile {
        display: block;
        display: inline;
    }

    /* Search Bar Styling */
    .search-bar-mobile {
        text-align: center;
        padding: 0.375rem 0.75rem;
        margin-inline: auto;
    }

    /* Search Bar Box Styling */
    .form-control-mobile {
        background-color: #BDBDBD;
        color: white;
    }

    /* Search Bar Button Styling */
    .btn-mobile {
        background-color: #6699CC;
        color: white;
        border: none;
    }
}

@media screen and (min-width: 290px) and (max-width: 900px) {

    #desktop-list {
        display: none;
    }

    .mobile-list-paragraph {
        display: block;
        margin-left: 60px;
        font-size: 30px;
        text-align: left;
        margin-top: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-indent: 5px;
    }    
}


@media (min-width: 750px) and (max-width: 1000px) {
  .animal-images img {
    /* Don’t exceed the viewport, but try to be big */
    max-width: 410px;
  }
}

/* Media Query When the screen is less than 1100 pixels wide */
@media screen and (max-width: 1000px) {
    /* Main index 4th Section image */
    .animal-images img {
        min-width: 110px;
        height: auto;
    }
}

/* Media Query When the screen is less than 1100 pixels wide */
@media screen and (max-width: 1100px) {
    /* Navigation Columns Responsiveness */
    .search-bar-desktop {
        display: none;
    }
}

/* Media Query for extra Large Desktop Viewport */
@media screen and (min-width: 1350px) {
    /* Main index 3rd Section image */

    /* Main index 4th Section image */
    .animal-images img {
        min-width: 50px;
        height: auto;
    }
}