/* Add hover effect for links */
header .navbar-nav .nav-link:hover {
    color: #153b65 !important;
}

/* Style the separator (|) */
.separator {
    color: #153b65;
    margin: 0 10px;
}

/* Ensure navbar stays at the top and is sticky */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure the navbar stays above other content */


}
                    
                
.navbar-custom {
    background-image: url('images/t-dr.gif');
    background-repeat: repeat-x;
}

.navbar-nav .nav-link {
    color: #000;
}

.navbar-toggler-icon {
    background-color: #000;
}
.navbar-search {
    max-width: 300px;
}
.thought-of-the-week {
    border: dotted 2px #0000aa;
    background: #eeeeff;
    padding: 10px;
}
.popular-searches a {
    color: #0000FF;
    margin-right: 10px;
}
.popular-searches a:hover {
    text-decoration: underline;
}
.dis-flex-row{
    display: flex;
    flex-direction: row;
}
.dis-flex-column{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: end;
}
.main-container{
    width: 100%;
    max-width: 100%;
    padding: 0 20px 0 20px;
    margin-left: 0;
    margin-right: 0;
}
.no-padding{
    padding: 0px !important;
}
.mr-10{
    margin-right: 10px !important;
}
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 1000;
}
#navbar{
    padding: 0;
}
#small-logo {
    padding: 0;
    top: 10px;
    right: 20px;
    opacity: 0; /* Initially hidden */
    display: none; /* Initially hidden */
    transition: opacity 0.3s ease, visibility 0s ease 0.3s; /* Smooth fade effect */
}
#navbar.shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add a soft shadow */
}
.card-look-design{
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08); /* Soft card-like shadow */
    border-radius: 8px; /* Optional: Rounded corners for a card effect */
    padding: 8px; /* Optional: Space inside td to avoid text being too close to borders */
    background-color: #fff; /* Optional: White background for the td */
    transition: box-shadow 0.3s ease; /* Smooth transition for shadow change */
    margin: 10px;
    max-height: 300px;
}
.card-look-design:hover {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15), 0px 2px 6px rgba(0, 0, 0, 0.1); /* More pronounced shadow */
}
.img-width-height{
    width: 100%;
    height: 220px;
}
/* Footer Styling */
footer.footer {
    background-color: #153b65 !important; /* White background */
    border-top: 4px solid #ffffff; /* Border at the top */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Soft shadow to give a card-like effect */
  }
  
  /* Hover Effect on Social Media Icons */
  footer a:hover img {
    transform: scale(1.2); /* Enlarge icon on hover */
    transition: transform 0.3s ease;
  }
  
  /* Hover Effect on Links */
  footer .footer-link:hover {
    color: #f0ad4e; /* Vibrant yellow/orange color */
    text-decoration: underline; /* Add underline on hover */
    transition: color 0.3s ease, text-decoration 0.3s ease;
  }
  
  /* Social Icons Styling */
  footer .social-icon {
    width: 40px; /* Consistent icon size */
    transition: transform 0.3s ease, opacity 0.3s ease;
    font-size: 24px;
  }
  
  /* Social Icon Hover Effect: Brighten color */
  footer .social-icon:hover {
    opacity: 0.8;
    transform: scale(1.1); /* Slightly enlarge on hover */
  }
  
  /* Footer Text */
  footer .font-weight-bold {
    font-size: 1.1em;
  }
  
  /* Styling the Footer Links */
  footer a {
    font-weight: 500;
    font-size: 1rem;
  }
  
  /* Responsive Design for Smaller Screens */
  @media (max-width: 576px) {
    footer .social-icon {
      width: 35px; /* Slightly smaller for mobile */
    }
  
    footer .footer-link {
      font-size: 0.9rem; /* Smaller text on mobile */
    }
  }
  
  /* Styling for the unordered list */
ul.list-group {
    padding-left: 0;
    list-style-type: none;
    margin-top: 30px;
}

/* Styling for each list item */
.list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
    font-size: 16px;  /* Larger text size */
    transition: all 0.3s ease;
}

/* Hover effect to change background color and text color */
.list-group-item:hover {
    background-color: #153b65;  /* Light blue background */
    color: #ffffff;  /* Dark text color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.list-group-item a:hover {
    background-color: #153b65;  /* Light blue background */
    color: #ffffff;  /* Dark text color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Styling for badges */
.badge {
    font-size: 16px;  /* Slightly larger text for badges */
    padding: 5px 12px;
    border-radius: 12px;
}

/* Badge colors */
.badge.bg-primary {
    background-color: #007bff;
}

.badge.bg-secondary {
    background-color: #6c757d;
}

.badge.bg-success {
    background-color: #28a745;
}

.badge.bg-info {
    background-color: #17a2b8;
}

.badge.bg-warning {
    background-color: #ffc107;
}

.badge.bg-danger {
    background-color: #dc3545;
}

/* Custom spacing and typography */
h2 {
    font-size: 2rem;
    color: #343a40;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
}
.form-control{
    border: 2px solid #153b65;
}
.style44{
    font-size: 14px;
    margin: 0 10px 0px 10px;
}
.carousel-caption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); /* Optional background overlay */
}

.carousel-caption h2 {
font-size: 3rem;
color: #fff;
font-weight: bold;
}

.carousel-item {
position: relative;
}

.responsive-div .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(21, 59, 101, 0.5), rgba(21, 59, 101, 0.7));
z-index: 1;
}
header{
    z-index: 9999;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Shadow under the header */
}


/* Styling for Owl Carousel */
.owl-carousel .item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
  }
  
  /* Styling for the card */
  .card {
    border: none;
    width: 100%;
    transition: transform 0.3s ease-in-out;
  }
  
  /* Box shadow effect */
  .card-img img {
    width: 100%;
    height: 250px; /* Fixed height for images */
    object-fit: cover; /* Ensure images fill the area */
    border-radius: 8px; /* Optional rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Box shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 10px;
  }
  
  /* Hover effect: image transforms and shadow intensifies */
  .card-img:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3); /* Darker, larger shadow */
  }
  
  /* Styling for the tags */
  .tags {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
  }
  
  .tags .badge {
    margin-right: 5px;
    font-size: 0.8em;
  }
  
  /* Style for card body */
  .card-body {
    background-color: #fff;
    padding: 15px;
  }
  
  .card-title {
    font-size: 1.25em;
    font-weight: bold;
    color: #153b65;
    text-align: left;
  }
  
  .card-text {
    font-size: 0.9em;
  }
  
  /* Set the background color of the owl-stage-outer to white */
.owl-stage-outer {
    background-color: white !important;
}

/* Set the background color of the owl-height to white */
.owl-height {
    background-color: white !important;
}

/* Ensure any nested elements have the desired white background */
.owl-carousel .owl-stage-outer, 
.owl-carousel .owl-height {
    background-color: white !important;
}

/* Additional cleanup: Remove any unwanted border or shadow from owl-stage-outer */
.owl-stage-outer {
    border: none !important;
    box-shadow: none !important;
}

/* Optional: Remove background from individual item containers if needed */
.owl-carousel .owl-item {
    background-color: white !important;
}
.get-details{
    text-decoration: none !important; 
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex:1 !important;
    color:white !important;
    border:none !important;
    background:#b5c541 !important;
    border-bottom-right-radius:5px;
}


/* Ensure the carousel item has a fixed height */
.item {
    height: 350px; /* Set the desired height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 10px; /* Optional margin between items */
}

/* Ensure the card content is aligned properly */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Ensure the card takes the full height of the item */
    border: none;
}

/* Image styling */
.card-img {
    height: 200px; /* Set the height of the image area */
    overflow: hidden; /* Ensures the image doesn't overflow */
}

.card-img img {
    object-fit: cover; /* Makes the image cover the container while maintaining aspect ratio */
    width: 100%;
    height: 100%;
}

/* Body text */
.card-body {
    flex-grow: 1;
    padding: 10px;
    display: flex;
    align-items: flex-start;
}
.start-align-row{
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: start !important;
    flex-direction: row;
}
.start-align{
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: start !important;
    flex-direction: column;
}
.centered-align{
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column;
}
.centered-align-row{
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: row;
}
.social-icon-top{
    color: white !important;
    padding: 5px !important;
    border-radius: 5px !important;
    display: flex !important;
    width: 25px !important;
    height: 25px !important;
    justify-content: center !important;
    align-items: center !important;
}

.nav-link{
    color:#000 !important;
    font-weight: bold !important;
}

    /* Style for the responsive div */
    .responsive-div {
        position: relative;
        width: 100%;
        height: 300px; /* You can adjust the height as needed */
        background-image: url('/images/homepage_image_small.jpg'); /* Replace with your image URL */
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-align: center;
        font-size: 2rem;
    }

    /* Make the text responsive */
    .responsive-div .inner-text {
        margin: 0;
        padding: 20px;
        border-radius: 10px; /* Optional: Adds rounded corners */
        z-index: 2;
    }
    .full-width-search-bar{
        box-shadow: 0 9px 18px rgba(0, 0, 0, 0.3);display: flex;
        height: 50px;
    }
    .full-width-search-bar-input-text{
        flex:15;border-right: none;border-top-right-radius: 0px;border-bottom-right-radius: 0px;
        height: 50px;
    }
    .full-width-search-bar-input-submit{
        flex:1;border:none; border-top-right-radius: 5px;border-bottom-right-radius: 5px;background-color: #153C65; color: white;
    }
    .category-select-dropdown{
        max-height: 200px !important;
        box-shadow: 0 9px 18px rgba(0, 0, 0, 0.3) !important;
        
        border: 2px solid #153C65 !important;
        border-radius: 5px !important;
        height: 50px !important;
        
        max-width: 100% !important;
    }



/* Contact button */
.contact-btn {
    background-color: #153b65;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    flex:1;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:0px;
    border-top-right-radius:0px;
    border-top-left-radius:0px;
}

.contact-btn:hover {
    background-color: #0a2b3d;
}

#specification tr{
    border-bottom: 1px dotted #ddd !important;
}
#specification td{
    padding: 10px 0 10px 0 !important;
}
.gallery1 img{
    border-radius: 15px;
}
.gallery1 a{
    padding: 5px;
}


/* Overlay styling */
#overlay-image  {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Dark transparent background */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it’s on top */
}

/* Full-width image in the overlay */
#overlay-image img {
    max-width: 90%; /* Adjusts to fit within the viewport */
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Close button styling */
#overlay-image .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: white;
    cursor: pointer;
    font-weight: bold;
}
.heading-prop{
    color:#212529 !important;text-align:left !important;border-bottom: 4px solid #153b65 !important;
    padding-bottom: 7px !important;
}
body{
    background-color: #eeeeee !important;
}
.desc-section{
    background-color: white !important;
    border-radius: 5px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; /* Add a soft shadow */
    padding: 20px !important;

}
.social-icon-e-p-m{
    background-color: white !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    color: #153b65 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    margin-right:10px !important;
}
.line-center{
    width: 100%; 
    border: 1px solid #c3c3c3;
}
.two-grid{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Two equal columns */
    gap: 10px !important; /* Optional spacing between columns */
}
.owl-nav{
    display: none !important;
}
.owl-dots{
    margin-top: 15px;
}



.select2-container--default .select2-selection--single {
    height: 50px;
    border: 2px solid #153C65 !important;
    border-radius: 5px;
    padding: 8px;
    font-size: 16px;
    color: #333;
    background-color: #f9f9f9;
}

/* Style the dropdown options */
.select2-container--default .select2-results__option {
    padding: 10px;
    font-size: 15px;
    color: #333;
}

/* Style selected item */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #555;
}

/* Highlight hovered item in dropdown */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3498db;
    color: white;
}

/* Customize the clear button */
.select2-container--default .select2-selection__clear {
    color: #153b65;
    font-weight: bold !important;
    font-size: 18px !important;
}

/* Add a fade-in effect to the dropdown */
.select2-dropdown {
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
footer h2{
    color:white !important;
}
footer .nav-link{
    color:white !important;
}
footer .nav-link:hover {
    color:white !important;
}
footer a{
    color:white !important;
}
footer span{
    color:white !important;
}
#google_translate_element{
    position: fixed !important;
    right: 0 !important;
    z-index: 10000 !important;
    top: 50px !important;
}