@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500;600;700;800;900&display=swap");

:root {
  --font: "Roboto", sans-serif; /* Updated to Roboto font */
  --body-color: #637381;       /* Body text color */
  --heading-color: #023d6b;    /* Dark blue from your logo */
  --primary-color: #023d6b;    /* Dark blue from your logo */
  --accent-color: #f16021;     /* Orange from your logo */
  --white: #ffffff;            /* White color */
}

section {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    box-sizing: border-box; /* Ensure padding is included in total height */
}
.btn-aaruni{
    background-color: var(--accent-color);
    padding: 5px;
    color: #fff;
    text-decoration: none;
}
.btn-aaruni:hover{
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
}

/*=============loading===============*/
.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Full viewport height */
    background-color: #fff; /* Background color during loading */
}

.logo {
    width: 80px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
}

.loading-bar {
    width: 120px; /* Width of the loading bar */
    height: 5px; /* Height of the loading bar */
    background: #ddd; /* Background color of the bar */
    position: relative;
    overflow: hidden;
}

.loading-bar::before {
    content: '';
    position: absolute;
    width: 30%; /* Width of the animated part */
    height: 100%;
    background: #000; /* Color of the scanning bar */
    animation: scan 1s infinite; /* Scanning animation */
}

@keyframes scan {
    0% {
        left: -30%; /* Start outside the left */
    }
    100% {
        left: 100%; /* Move to the right outside */
    }
}


/*===================bg-home1=======================*/
/*=================== Enhanced bg-home1 =======================*/
.bg-home1 {
    position: relative;
    height: 90vh;
    min-height: 35rem;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Arial', sans-serif;
}

.bg-home1 video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.bg-home1 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
    z-index: 1;
}

.bg-home1 .container {
    position: relative;
    z-index: 2;
    padding-top: 100px;
    text-align: center;
}

.bg-home1 .hero-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.bg-home1 .hero-desc {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: var(--primary-color);
}

.bg-home1 .hero-button {
    background-color: #FF4400;
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.bg-home1 .hero-button:hover {
    background-color: #E63600;
}

.bg-home1 img {
    max-width: 100%;
    height: auto;
    animation: fadeIn 1s ease-in-out;
}

/* Responsiveness */
@media (max-width: 768px) {
    .bg-home1 {
        height: 70vh;
    }

    .bg-home1 .hero-title {
        font-size: 2rem;
    }

    .bg-home1 .hero-desc {
        font-size: 1rem;
    }

    .bg-home1 .hero-button {
        font-size: 0.9rem;
        padding: 10px 20px;
    }
}

@media (max-width: 576px) {
    .bg-home1 {
        height: 60vh;
    }

    .bg-home1 .hero-title {
        font-size: 1.8rem;
    }

    .bg-home1 .hero-desc {
        font-size: 0.9rem;
    }

    .bg-home1 .hero-button {
        font-size: 0.8rem;
        padding: 8px 16px;
    }
}
/*=================== Enhanced bg-home1 =======================*/

/*===================bg-home1=======================*/


/*======================bg-home2============================*/

.bg-home2 {
    position: relative;
    height: 70vh;
    overflow: hidden; /* Ensure content is contained */
}

.bg-home2 video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1; /* Keep video behind overlay */
}

.bg-home2 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2; /* Ensure overlay is above the video */
}

.bg-home2 .container {
    position: relative;
    z-index: 3; /* Keep content above overlay */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: white;
    padding: 20px; /* Optional padding for content */
}

/* Responsive height */
@media (max-width: 768px) {
    .bg-home2 {
        height: 60vh;
    }
}

@media (max-width: 576px) {
    .bg-home2 {
        height: 50vh;
    }
}


/*======================bg-home2============================*/

/* ===== About CSS ===== */
.about-1 {
  background: #f3f4fe; /* Light background */
  padding: 120px 0;
}

@media (max-width: 767px) {
  .about-1 {
    padding: 80px 0;
  }
}

.about-1 .about-wrapper {
  background: white; /* Background color */
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .about-1 .about-wrapper {
    display: block; /* Stack on smaller screens */
  }
}

.about-1 .about-content-wrapper {
  padding: 70px;
}

@media (max-width: 767px) {
  .about-1 .about-content-wrapper {
    padding: 50px 30px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-1 .about-content-wrapper {
    padding: 50px;
  }
}

.about-1 .about-content {
  max-width: 500px;
}

.about-1 .about-content .tag {
  font-weight: 500;
  font-size: 14px;
  color: white; /* Text color */
  background: #003366; /* Dark blue for tag */
  padding: 5px 20px;
  display: inline-block;
  margin-bottom: 20px;
}

.about-1 .about-content h2 {
  font-weight: bold;
  font-size: 36px;
  line-height: 45px;
  margin-bottom: 30px;
  color: #003366; /* Dark blue for headings */
}

@media (max-width: 767px) {
  .about-1 .about-content h2 {
    font-size: 26px;
    line-height: 38px;
  }
}

.about-1 .about-content p {
  font-size: 16px;
  line-height: 28px;
  margin-bottom: 40px;
  color: #333; /* Dark text for readability */
}

.about-1 .about-content .ud-main-btn:hover {
  background: #FF6600; /* Orange for hover */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .about-1 .about-image {
    text-align: center; /* Center image */
  }
}

/* ===== About CSS ===== */
.about-2 {
    background: #f9f9f9; /* Light background */
    padding: 80px 0; /* Increased padding for balance */
}

.about-2 .about-wrapper {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    align-items: center; /* Center content vertically */
}

.about-2 .about-image {
    flex: 1; /* Allow image to take half of the space */
    text-align: center;
}

.about-2 .about-image img {
    max-width: 80%; /* Responsive image size */
    height: auto;
}

.about-2 .about-content-wrapper {
    flex: 1; /* Allow content to take half of the space */
    padding: 50px; /* Padding for content */
}

.about-2 .about-content .tag {
    font-weight: 500;
    font-size: 14px;
    color: white;
    background: #003366; /* Dark blue */
    padding: 5px 20px;
    display: inline-block;
    margin-bottom: 20px;
}

.about-2 .about-content h2 {
    font-weight: bold;
    font-size: 36px;
    line-height: 45px;
    margin-bottom: 30px;
    color: #003366; /* Dark blue */
}

.about-2 .about-content p {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 40px;
    color: #333; /* Dark text for readability */
}

.about-2 .about-content h4 {
    font-size: 18px;
    color: #FF6600; /* Orange for subheadings */
}

.about-2 .about-content .ud-main-btn:hover {
    background: #2748b4; /* Blue for hover */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .about-2 .about-wrapper {
        flex-direction: column; /* Stack vertically on smaller screens */
    }
    
    .about-2 .about-image {
        margin-bottom: 30px; /* Space between image and text */
    }
}



.about-advanced-4 {
    display: flex;
    background: #f3f4fe;
    padding: 100px 0;
    background-size: cover; /* Ensures the background image covers the section */
    background-position: center; /* Center the background image */
    position: relative; /* Ensure absolute positioned elements can be placed */
}

.about-advanced-4 .about-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-advanced-4 .about-image img {
    max-width: 100%;
    border-radius: 10px;
}

.about-advanced-4 .about-content {
    padding: 50px;
    animation: fadeInRight 1s; /* Fade-in animation */
    background: rgba(255, 255, 255, 0.8); /* Slightly transparent background for readability */
    border-radius: 10px; /* Rounded corners */
}

.about-advanced-4 .cta-button {
    margin-top: 20px;
}

.about-advanced-4 .btn-main {
    background: #FF6600; /* Your brand color */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}

.about-title {
    font-weight: bold; /* Make the title bold */
    font-size: 32px; /* Default font size */
    line-height: 40px; /* Adjust line height for spacing */
    color: #003366; /* Brand color (dark blue) */
    margin-bottom: 20px; /* Space below the title */
    text-align: left; /* Align the title to the left */
    position: relative; /* Position relative for decorative effects */
}

.about-title::after {
    content: ""; /* Decorative element */
    display: block;
    width: 60px; /* Width of the line */
    height: 4px; /* Height of the line */
    background: #FF6600; /* Brand color (orange) */
    margin-top: 8px; /* Space above the line */
    border-radius: 2px; /* Slightly rounded edges */
}

@keyframes fadeInRight {
    from {
        transform: translateX(20%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .about-advanced-4 {
        padding: 60px 0; /* Adjust padding for smaller screens */
    }

    .about-advanced-4 .about-content {
        padding: 30px; /* Reduce padding for content */
    }

    .about-title {
        font-size: 24px; /* Reduced font size for mobile */
        line-height: 30px; /* Adjust line height */
    }

    .about-advanced-4 h4 {
        font-size: 20px; /* Smaller h4 size */
        line-height: 26px; /* Adjust line height */
    }

    .about-advanced-4 p {
        font-size: 14px; /* Smaller paragraph text */
        line-height: 20px; /* Adjust line height for readability */
    }

    .about-advanced-4 h5 {
        font-size: 16px; /* Smaller h5 size */
        line-height: 22px; /* Adjust line height */
    }
}



/*================= products ====================*/
/* General Card Styling */
.product-section-advanced .card {
    background: #FFFFFF;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 1rem;
    transition: transform 0.3s ease;
}

.product-section-advanced .product-title {
    font-weight: bold; /* Make the title bold */
    font-size: 32px; /* Reduced font size */
    line-height: 40px; /* Adjust line height for spacing */
    color: #003366; /* Brand color (dark blue) */
    margin-bottom: 20px; /* Space below the title */
    text-align: center; /* Center the title */
    position: relative; /* Position relative for decorative effects */
}

/* Decorative line below the title */
.product-section-advanced .product-title::after {
    content: ""; /* Decorative element */
    display: block;
    width: 60px; /* Width of the line */
    height: 4px; /* Height of the line */
    background: #FF6600; /* Brand color (orange) */
    margin: 8px auto 0 auto; /* Center the line and add space above */
    border-radius: 2px; /* Slightly rounded edges */
}


.product-section-advanced .card:hover {
    transform: translateY(-5px);
     border: 2px solid #FF6600;
}

/* Image Styling with Padding */
.product-section-advanced .img-hover-zoom img {
    width: 100%;
    height: auto;
    padding: 20px; /* Padding around the image */
    transition: transform 0.5s ease;
}

.product-section-advanced .img-hover-zoom img:hover {
    transform: scale(1.05);
}

/* Card Body Flexbox Layout for Content */
.product-section-advanced .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}

/* Product Title Styling */
.product-section-advanced .card-body .brand-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #003366; /* Dark blue brand color */
    margin-bottom: 10px;
    text-align: center;
}

/* Product Description Styling */
.product-section-advanced .product-description {
    font-size: 0.9rem;
    color: #7a7a7a;
    text-align: center;
    margin-bottom: 15px;
}

/* Product Price Styling */
.product-section-advanced .product-price {
    font-size: 1rem;
    color: #FF6600; /* Orange brand color */
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

/* "View Details" Button Styling */
.product-section-advanced .btn-main {
    background-color: #003366; /* Dark blue brand color */
    color: #FFFFFF;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease;
    margin-top: auto; /* Ensures button sticks to the bottom */
}

/* Button color changes to orange when hovering on the card */
.product-section-advanced .card:hover .btn-main {
    background-color: #FF6600; /* Orange brand color when card is hovered */
    text-decoration: none;
    color: #FFFFFF;
}

/* Hover Effect on the Entire Card */
.product-section-advanced .card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Mobile Media Query for Smaller Screens */
@media only screen and (max-width: 768px) {
    .product-section-advanced .card-body {
        padding: 15px;
    }

    .product-section-advanced .card-body .product-title {
        font-size: 1rem;
    }

    .product-section-advanced .product-price {
        font-size: 0.9rem;
    }
}

/*================= why choose us ====================*/

.ud-features .why-title {
    font-weight: bold; /* Make the title bold */
    font-size: 32px; /* Reduced font size */
    line-height: 40px; /* Adjust line height for spacing */
    color: #003366; /* Brand color (dark blue) */
    margin-bottom: 20px; /* Space below the title */
    text-align: center; /* Center the title */
    position: relative; /* Position relative for decorative effects */
}

/* Decorative line below the title */
.ud-features .why-title::after {
    content: ""; /* Decorative element */
    display: block;
    width: 60px; /* Width of the line */
    height: 4px; /* Height of the line */
    background: #FF6600; /* Brand color (orange) */
    margin: 8px auto 0 auto; /* Center the line and add space above */
    border-radius: 2px; /* Slightly rounded edges */
}

/*================= why choose us ====================*/

.ud-testimonials .section-title {
    font-weight: bold; /* Make the title bold */
    font-size: 32px; /* Reduced font size */
    line-height: 40px; /* Adjust line height for spacing */
    color: #003366; /* Brand color (dark blue) */
    margin-bottom: 20px; /* Space below the title */
    text-align: center; /* Center the title */
    position: relative; /* Position relative for decorative effects */
}

/* Decorative line below the title */
.ud-testimonials .section-title::after {
    content: ""; /* Decorative element */
    display: block;
    width: 60px; /* Width of the line */
    height: 4px; /* Height of the line */
    background: #FF6600; /* Brand color (orange) */
    margin: 8px auto 0 auto; /* Center the line and add space above */
    border-radius: 2px; /* Slightly rounded edges */
}

.ud-testimonials {
  padding: 50px 0;
}

.ud-single-testimonial {
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin: 10px;
  
}

.ud-testimonial-content p {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.ud-testimonial-ratings i {
  color: #FF6600; /* Make sure the color aligns with your brand */
  font-size: 20px;
}

.ud-testimonial-meta h4 {
  font-weight: bold;
  margin-top: 15px;
}

.ud-testimonial-meta p {
  color: #777;
}
/*===================product page========================*/
/* Main Product Section */
.product-section {
    margin-top: 60px; /* Match this with the height of your navbar */
}

.product-section .product-image {
    position: relative;
    width: 100%;
    height: 500px; /* Set a fixed height for the main image */
    overflow: hidden;
    border: 1px solid #ddd; /* Add a border for aesthetics */
    border-radius: 5px; /* Rounded corners */
}

.product-section .product-image img {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    object-fit: contain; /* Maintain aspect ratio and fit within the container */
    display: block; /* Removes extra space below image */
}

.product-section .thumbnail-container {
    display: flex; /* Horizontal layout for thumbnails */
    margin-top: 15px; /* Space between main image and thumbnails */
    overflow-x: auto; /* Enable horizontal scrolling if needed */
}

.product-section .thumbnail {
    width: 100px; /* Fixed width for thumbnails */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Space between thumbnails */
    cursor: pointer; /* Change cursor on hover */
    border: 2px solid transparent; /* Transparent border */
    transition: border-color 0.3s; /* Smooth border color transition */
}

.product-section .thumbnail:hover {
    border-color: #007bff; /* Highlight border on hover */
}

.product-section .thumbnail.active {
    border-color: #007bff; /* Active border color for selected thumbnail */
}

@media (max-width: 576px) {
    .product-section .thumbnail {
        width: 80px; /* Smaller size for mobile devices */
    }
}

/* Tab Section */
.product-section .nav-tabs {
    margin-top: 20px;
    border-bottom: 2px solid #ddd;
}

.product-section .nav-tabs .nav-link {
    color: #023d6b;
    border: 1px solid transparent;
    margin-right: 5px;
    font-weight: bold;
}

.product-section .nav-tabs .nav-link.active {
    color: #fff;
    background-color: #023d6b;
    border-color: #023d6b;
}

.product-section .tab-content {
    margin-top: 20px;
}

.product-section .accordion-button {
    font-size: 14px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
}

.product-section .accordion-button:not(.collapsed) {
    background-color: #e9ecef;
}

.product-section .accordion-item {
    margin-bottom: 10px;
}

/* Price Section */
.product-section .price {
    font-size: 24px;
    color: #f16021;
}

.product-section .btn-primary {
    background-color: #023d6b;
    border-color: #023d6b;
}

@media (max-width: 768px) {
    .product-section .product-title {
        font-size: 22px;
    }

    .product-section .price {
        font-size: 20px;
    }

    .product-section .product-image {
        height: 350px; /* Adjust for smaller screens */
    }
}

@media (max-width: 576px) {
    .product-section .product-title {
        font-size: 18px;
    }

    .product-section .price {
        font-size: 18px;
    }

    .product-section .nav-tabs .nav-link {
        font-size: 12px;
    }

    .product-section .accordion-button {
        font-size: 12px;
    }

    .product-section .product-image {
        height: 300px; /* Further adjustment for mobile screens */
    }
}


/*===================== other related product ==========================*/
/* New Product Details Section Styles */

.product-details-section .section-title {
    font-weight: bold; /* Make the title bold */
    font-size: 32px; /* Reduced font size */
    line-height: 40px; /* Adjust line height for spacing */
    color: #003366; /* Brand color (dark blue) */
    margin-bottom: 20px; /* Space below the title */
    text-align: center; /* Center the title */
    position: relative; /* Position relative for decorative effects */
}

/* Decorative line below the title */
.product-details-section .section-title::after {
    content: ""; /* Decorative element */
    display: block;
    width: 60px; /* Width of the line */
    height: 4px; /* Height of the line */
    background: #FF6600; /* Brand color (orange) */
    margin: 8px auto 0 auto; /* Center the line and add space above */
}

.product-details-section .product-detail-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
    border: none;
    transition: transform 0.3s ease;
    padding-bottom: 40px; /* Adjusted bottom padding */
}

/* Button Styles */
.product-details-section .inquire-btn {
    margin-top: 15px; /* Space above the button */
}

/* Inquiry button */
.product-details-section .inquire-btn button {
    background-color: #023d6b;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    transition: background-color 0.3s ease;
}

.product-details-section .inquire-btn button:hover {
    background-color: #FF6600;
}

/* Image Styling */
.product-details-section .img-hover-detail img {
    width: 100%;
    height: auto;
    padding: 10px;
    transition: transform 0.5s ease;
}

.product-details-section .img-hover-detail img:hover {
    transform: scale(1.05);
}

/* Product Content */
.product-details-section .product-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: #023d6b; /* Dark blue */
    text-align: left;
    margin-top: 10px;
}

.product-details-section .product-summary {
    font-size: 1rem;
    color: #637381; /* Body text color */
    text-align: left;
    margin-top: 5px;
}

/* Tab Styles */
.product-details-section .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 5px;
}

.product-details-section .nav-tabs .nav-link {
    color: #023d6b;
    font-weight: bold;
    margin: 5px;
}

.product-details-section .nav-tabs .nav-link.active {
    background-color: #FF6600; /* Orange when active */
    color: #fff;
}

.product-details-section .tab-content {
    margin-top: 20px;
}

/* FAQ Accordion */
.product-details-section .accordion-button {
    background-color: #023d6b;
    color: #fff;
}

.product-details-section .accordion-button:not(.collapsed) {
    background-color: #FF6600; /* Orange when expanded */
    color: #fff;
}

.product-details-section .accordion-body {
    background-color: #f3f3f3;
}

/* Hover Effects */
.product-details-section .product-detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Mobile Media Query */
@media (max-width: 768px) {
    .product-details-section .product-detail-card {
        flex-direction: column;
        padding-bottom: 40px; /* Ensure enough space for the button */
    }
    
    .product-details-section .img-hover-detail img {
        padding: 5px; /* Reduce padding on smaller screens */
    }

    .product-details-section .product-name {
        font-size: 1.3rem; /* Adjust font size for smaller screens */
        text-align: center; /* Center the text */
    }

    .product-details-section .product-summary {
        font-size: 0.9rem; /* Adjust font size for smaller screens */
        text-align: center; /* Center the text */
    }

    /* Button Centering on Mobile */
    .product-details-section .inquire-btn {
        margin-top: 10px; /* Adjust margin for mobile */
    }

    /* Tab Styles on Mobile */
    .product-details-section .nav-tabs {
        flex-direction: column; /* Stack the tabs vertically on mobile */
        align-items: stretch; /* Make the tabs full width */
    }

    .product-details-section .nav-tabs .nav-link {
        margin: 0; /* Remove margins between stacked tabs */
        border-radius: 0; /* Remove border radius for full width look */
        text-align: center; /* Center the text */
    }

    .product-details-section .tab-content {
        padding: 10px;
        font-size: 0.9rem;
    }

    /* Reduce padding for accordion content */
    .product-details-section .accordion-body {
        padding: 10px;
    }

    /* Responsive adjustments for the FAQ accordion */
    .product-details-section .accordion-button {
        font-size: 0.9rem;
    }
}


/*============== about us - our pride  ===============*/
.our-abhimaan {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

.pride-title {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    color: #003366;
    margin-bottom: 20px;
    position: relative;
}

.pride-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #FF6600;
    margin-top: 8px;
    border-radius: 2px;
}

.pride-content p {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
    line-height: 1;
}

.pride-content h5 i {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.pride-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 100%; /* Match height with content */
}

.pride-img {
    width: 100%;
    height: 100%;
    max-height: 400px; /* Optional max height */
    border-radius: 15px;
    object-fit: cover; /* Cover area, maintain aspect ratio */
    transition: transform 0.5s;
}

.pride-img:hover {
    transform: scale(1.05);
}

/* Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-bounce {
    animation: bounce 2s ease infinite;
}

/* Floating Shape Animation */
.shape-wrapper {
    position: absolute;
    top: -100px;
    right: -100px;
}

.floating-shape {
    width: 200px;
    height: 200px;
    background-color: #FFC107;
    border-radius: 50%;
    animation: shape-float 5s ease-in-out infinite;
}

@keyframes shape-float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(30px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .pride-images {
        flex-direction: column;
        align-items: center;
    }
    .pride-img {
        width: 200px;
        max-height: none; /* Allow height to adjust */
    }
}

@media (max-width: 768px) {
    .pride-title {
        font-size: 24px;
    }

    .pride-content p {
        font-size: 14px;
    }
}


/*================  ==================*/

/* Shraddha Section Styles */
.shraddha-section {
    padding: 60px 0;
}

.shraddha-title  {
    font-weight: bold; /* Make the title bold */
    font-size: 32px; /* Reduced font size */
    line-height: 40px; /* Adjust line height for spacing */
    color: #003366; /* Brand color (dark blue) */
    margin-bottom: 20px; /* Space below the title */
    text-align: center; /* Center the title */
    position: relative; /* Position relative for decorative effects */
}

.shraddha-title::after {
    content: ""; /* Decorative element */
    display: block;
    width: 60px; /* Width of the line */
    height: 4px; /* Height of the line */
    background: #FF6600; /* Brand color (orange) */
    margin: 8px auto 0 auto; /* Center the line and add space above */
    border-radius: 2px; /* Slightly rounded edges */
}

/* Shared card styles */
.shraddha-section  .shraddha-card {
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    color: #000; /* Default text color */
    position: relative;
    background-size: cover;
    background-blend-mode: overlay;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}

.shraddha-card p{
    color: var(--primary-color);
    font-weight: bold;
}

/* Adding text shadow for better readability */
.shraddha-section .shraddha-card h3, .shraddha-card p {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* Dark text shadow */
}

/* Earth card */
.shraddha-section .shraddha-earth-card {
    background-image: linear-gradient(to bottom, rgba(34, 139, 34, 0.2), rgba(139, 69, 19, 0.2)), url('../images/about/elements/1.png');
}

/* Water card */
.shraddha-section .shraddha-water-card {
    background-image: linear-gradient(to bottom, rgba(30, 144, 255, 0.2), rgba(0, 191, 255, 0.2)), url('../images/about/elements/2.png');
}

/* Fire card */
.shraddha-section .shraddha-fire-card {
    background-image: linear-gradient(to bottom, rgba(255, 140, 0, 0.2), rgba(255, 69, 0, 0.2)), url('../images/about/elements/3.png');
}

/* Air card */
.shraddha-section .shraddha-air-card {
    background-image: linear-gradient(to bottom, rgba(240, 248, 255, 0.2), rgba(173, 216, 230, 0.2)), url('../images/about/elements/4.png');
}

/* Ether card */
.shraddha-section .shraddha-ether-card {
    background-image: linear-gradient(to bottom, rgba(230, 230, 250, 0.2), rgba(147, 112, 219, 0.2)), url('../images/about/elements/5.png');
}


/*===============================================*/

/* Vision Section Styles */
.vision-section {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../images/banner/4.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.vision-section .section-title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 40px;
    color: #FFFFFF;
    position: relative;
    z-index: 1;
}

.vision-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
}

.vision-card {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: calc(45% - 20px); /* Adjust for desktop */
    min-height: 250px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

.vision-card:hover {
    transform: scale(1.05);
}

.vision-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    transition: opacity 0.3s;
}

.vision-overlay h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #f16021;
    text-transform: uppercase;
}

.vision-overlay p {
    font-size: 16px;
    line-height: 1.5;
    padding: 0 10px;
    color: #FFFFFF;
}

/* Responsive adjustments */
@media (max-width: 992px) { /* Tablet view */
    .vision-section .section-title {
        font-size: 30px;
    }

    .vision-card {
        width: 100%; /* Full-width on smaller screens */
        min-height: 200px; /* Adjust minimum height */
    }

    .vision-overlay h3 {
        font-size: 20px;
    }

    .vision-overlay p {
        font-size: 14px;
    }
}

@media (max-width: 576px) { /* Mobile view */
    .vision-section {
        padding: 60px 0; /* Reduce padding */
    }

    .vision-section .section-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .vision-card {
        min-height: 180px;
    }

    .vision-overlay h3 {
        font-size: 18px;
    }

    .vision-overlay p {
        font-size: 14px;
        padding: 0 5px; /* Reduce padding for smaller screens */
    }
}




/* Yatra Section Styles */
.yatra-section {
    background: linear-gradient(to bottom right, rgba(2, 61, 107, 0.8), rgba(241, 96, 33, 0.8)); /* Gradient combining primary and accent colors */
    color: var(--white); /* Keep white for text for better contrast */
    padding: 60px 20px;
    text-align: center;
}

.yatra-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.yatra-card {
    background: var(--white); /* Card background remains white */
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    padding: 40px;
    transition: transform 0.3s;
    width: 100%;
    max-width: 500px; /* Control card width */
}

.yatra-card:hover {
    transform: translateY(-5px); /* Subtle lift effect on hover */
}

.yatra-card h2 {
    font-size: 28px;
    margin-bottom: 15px;
    color: var(--heading-color); /* Dark blue for the title */
}

.yatra-card p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--body-color); /* Body text color */
}

.yatra-button {
    background: var(--accent-color); /* Use accent color */
    color: var(--white);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.yatra-button:hover {
    background: #d35a1e; /* Darker accent color on hover */
}


/*================================================*/
.ulba-products {
    padding: 40px 0; /* Vertical padding */
}

.ulba-products h2 {
    color: #023d6b; /* Use your defined heading color */
    font-size: 2.5rem; /* Increase font size for the heading */
    margin-bottom: 30px; /* Space below the heading */
}

.ulba-products .card {
    transition: transform 0.2s; /* Smooth scaling effect */
    border-radius: 0.5rem; /* Rounded corners for cards */
    height: 100%; /* Ensures all cards are the same height */
}

.ulba-products .card:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}

.ulba-products .btn-primary {
    background-color: #023d6b; /* Dark blue from logo */
    border-color: #023d6b; /* Match border color with the button */
}

.ulba-products .btn-primary:hover {
    background-color: #f16021; /* Change to accent color on hover */
    border-color: #f16021; /* Match border color with the hover state */
}

/*================== Single-use-product======================*/
/* Single-use Equipment Section Styling */
.single-use-equipment-section h1, .single-use-equipment-section h2 {
    color: var(--heading-color);
    font-weight: 700;
}

.single-use-equipment-section p {
    color: var(--body-color);
}

.single-use-equipment-section img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/*================= certificate-section =========================*/
.certificates {
    background-color: #f1f1f1;
}

.certificate-thumbnail {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px; /* Adds a subtle rounded corner to thumbnails */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
}

.certificate-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
}

.modal-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Adds rounded corners to the image inside modal */
}

.modal-footer {
    border-top: none;
}

/* Optional: For Section Title Styling */
.certificates .section-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #023d6b; /* Use your primary brand color */
}

.certificates .section-description {
    font-size: 1rem;
    color: #637381; /* Adjust this color as per your site theme */
    margin-bottom: 2rem;
}

.section-title {
    font-weight: bold; /* Make the title bold */
    font-size: 32px; /* Reduced font size */
    line-height: 40px; /* Adjust line height for spacing */
    color: #003366; /* Brand color (dark blue) */
    margin-bottom: 20px; /* Space below the title */
    text-align: center; /* Center the title */
    position: relative; /* Position relative for decorative effects */
}

/* Decorative line below the title */
.section-title::after {
    content: ""; /* Decorative element */
    display: block;
    width: 60px; /* Width of the line */
    height: 4px; /* Height of the line */
    background: #FF6600; /* Brand color (orange) */
    margin: 8px auto 0 auto; /* Center the line and add space above */
    border-radius: 2px; /* Slightly rounded edges */
}

.right-section-title{
    font-weight: bold; /* Make the title bold */
    font-size: 32px; /* Reduced font size */
    line-height: 40px; /* Adjust line height for spacing */
    color: #003366; /* Brand color (dark blue) */
    margin-bottom: 20px; /* Space below the title */
    text-align: left; /* Center the title */
    position: relative; /* Position relative for decorative effects */

}

.right-section-title::after {
    content: ""; /* Decorative element */
    display: block;
    width: 60px; /* Width of the line */
    height: 4px; /* Height of the line */
    background: #FF6600; /* Brand color (orange) */
    margin: 8px 0 0 0; /* Remove auto margin to align to the left */
    border-radius: 2px; /* Slightly rounded edges */
}


/*===================== model style =============================*/
/* inquiry_modal.css */
.inquiry-modal {
    /* Background for the modal */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
}

/* Modal styles */
.inquiry-modal .modal-content {
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

/* Modal header styles */
.inquiry-modal .modal-header {
    background-color: var(--primary-color); /* Primary color for the header */
    
}
.inquiry-modal .modal-title{
    color: var(--white);
}

/* Modal body styles */
.inquiry-modal .modal-body {
    padding: 20px; /* Increased padding for better spacing */
}

/* Form input styles */
.inquiry-modal .form-control {
    border: 1px solid #ced4da; /* Light border color */
    border-radius: 5px; /* Rounded input corners */
    transition: border-color 0.2s; /* Smooth transition for focus effect */
}

.inquiry-modal .form-control:focus {
    border-color: var(--accent-color); /* Accent color on focus */
    box-shadow: 0 0 5px rgba(255, 106, 0, 0.5); /* Soft shadow on focus */
}

/* Required field styles */
.inquiry-modal .text-danger {
    font-weight: bold; /* Bold for visibility */
}

/* Modal footer styles */
.inquiry-modal .modal-footer {
    justify-content: space-between; /* Space between buttons */
}

/* Submit button styles */
.inquiry-modal .btn-primary {
    background-color: var(--accent-color); /* Accent color for submit button */
    border-color: var(--accent-color); /* Match border color */
}

.inquiry-modal .btn-primary:hover {
    background-color: darken(var(--accent-color), 10%); /* Darken on hover */
}

/* Close button styles */
.inquiry-modal .btn-close {
    color: var(--white); /* White color for close button */
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .inquiry-modal .modal-dialog {
        margin: 0; /* No margin on small screens */
    }

    .inquiry-modal .modal-content {
        border-radius: 0; /* Remove rounded corners for small screens */
    }
}


/* ====== Our Clients Section CSS ====== */

#our-clients {
  background-color: #f8f9fa; /* Light background */
}

#our-clients .section-title {
  font-size: 32px;
  color: #003366; /* Dark blue color for title */
  font-weight: bold;
  margin-bottom: 20px;
}

.our-clients-carousel .client-item {
  text-align: center;
  padding: 10px;
  transition: transform 0.3s ease;
}

.our-clients-carousel .client-item:hover {
  transform: scale(1.05); /* Slight scale on hover for effect */
}

.our-clients-carousel .client-logo {
  height: auto;
  transition: filter 0.3s ease;
}


/* Responsive adjustments if needed */
@media (max-width: 768px) {
  #our-clients .section-title {
    font-size: 24px;
  }
}


.single-products {
    padding: 5rem 0;
    background-size: cover;
    background-position: center;
}

.single-products .right-section-title {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--heading-color);
}

.single-products .btn {
    color: var(--white);
    background-color: var(--accent-color);
    border: none;
    transition: background-color 0.3s ease;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

.single-products .btn:hover {
    background-color: darken(var(--accent-color), 10%);
}

.single-products .product-detail-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.single-products .product-detail-card:hover {
    transform: translateY(-5px);
}

.single-products .product-detail-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 8px 8px 0 0;
}

.single-products .img-hover-detail:hover .product-detail-image {
    transform: scale(1.05);
}

.single-products .product-name {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--heading-color);
}

.single-products .product-summary {
    font-size: 0.95rem;
    color: var(--body-color);
    line-height: 1.6;
}

.single-products .inquire-btn .btn {
    background-color: var(--primary-color);
    color: var(--white);
    transition: background-color 0.3s ease;
}

.single-products .inquire-btn .btn:hover {
    background-color: darken(var(--primary-color), 10%);
}

.single-products .product-detail-body {
    padding: 1rem;
}

.single-products .nav-tabs .nav-item .nav-link {
    font-size: 0.875rem;
    color: var(--heading-color);
    transition: color 0.3s ease;
}

.single-products .nav-tabs .nav-item .nav-link:hover {
    color: var(--primary-color);
}

.single-products .nav-tabs .nav-link.active {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
}

.single-products .product-tabs-content {
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--body-color);
}

.single-products .product-tabs-content ul {
    padding-left: 1.25rem;
}

.single-products .product-tabs-content ul li {
    margin-bottom: 0.5rem;
    list-style-type: disc;
}

/* Media Queries for Responsiveness */

@media (max-width: 768px) {

    .single-products .right-section-title {
        font-size: 1.5rem;
    }

    .single-products .product-name {
        font-size: 1.1rem;
    }

    .single-products .product-summary {
        font-size: 0.9rem;
    }

    .single-products .btn {
        font-size: 0.875rem;
        padding: 0.4rem 0.8rem;
    }

    .single-products .product-tabs-content {
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {

    .single-products .btn {
        width: 100%;
        text-align: center;
    }

    .single-products .product-summary {
        font-size: 0.85rem;
    }

    .single-products .nav-tabs .nav-item .nav-link {
        font-size: 0.8rem;
    }
}



/* Chatbot Icon Styling */
.chatbot-icon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.3s;
}

.chatbot-icon:hover {
    transform: scale(1.1);
}

/* Chatbot Container Styling */
.chatbot-container {
    width: 350px;
    max-width: 90%;
    background-color: #ffffff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    position: fixed;
    bottom: 120px;
    left: 20px;
    overflow: hidden;
    z-index: 1000;
    display: none;
}

@media (max-width: 576px) {
    .chatbot-container {
        width: 90%;
        left: 5%;
    }
}

/* Chat Header Styling */
.chat-header {
    background-color: var(--primary-color, #007bff); /* Fallback to blue if --primary-color is not set */
    color: #ffffff;
    padding: 12px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

/* Chat Messages Styling */
.chat-messages {
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 14px;
    background-color: #f8f9fa;
}

.chat-message {
    margin: 8px 0;
}

.bot-message {
    background-color: #e9ecef;
    padding: 10px;
    border-radius: 15px;
    max-width: 80%;
    margin-right: auto;
}

.user-message {
    background-color: #007bff;
    color: #ffffff;
    padding: 10px;
    border-radius: 15px;
    max-width: 80%;
    margin-left: auto;
    align-self: flex-end;
}

/* Chat Input Styling */
.chat-input {
    display: flex;
    border-top: 1px solid #ddd;
}

.chat-input input {
    flex: 1;
    padding: 10px;
    border: none;
    outline: none;
    font-size: 14px;
}

.chat-input button {
    padding: 10px 15px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.chat-input button:disabled {
    background-color: #999;
    cursor: not-allowed;
}

.chat-input button:hover:not(:disabled) {
    background-color: #0056b3;
}

/* Chat Options Styling */
.chat-options {
    margin: 10px 0;
    text-align: center;
}

.chat-options button {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    padding: 8px 12px;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
}

.chat-options button:hover {
    background-color: #0056b3;
}

/* Form Container Styling */
#form-container {
    padding: 10px;
    background-color: #ffffff;
    border-top: 1px solid #ddd;
}

#form-container form {
    display: flex;
    flex-direction: column;
}

#form-container form label {
    margin-top: 10px;
    font-size: 14px;
}

#form-container form input,
#form-container form textarea {
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

#form-container form button {
    margin-top: 10px;
    padding: 10px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#form-container form button:hover {
    background-color: #0056b3;
}