/* Header Slider */
.header-slider-area {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    margin: 0 50px; /* Adjust margin as needed */
}
.header-slider-item {
    height: 60vh;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    position: relative;
    padding: 50px 0;
}


.header-inner {
    text-align: center;
    color: #fff;
}

.breadcrumb-bg {
    background-image: url('/img/bg/breadcrumb.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.about-us-area {
    background: #f9f9f9;
    padding: 80px 0;
}

.about-image img {
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.about-content {
    text-align: justify;
}

.about-content .section-title .subtitle {
    color: #ff6600;
    font-weight: bold;
    font-size: 16px;
}

.about-content h2.title {
    font-size: 32px;
    font-weight: 700;
}

.about-content .description p {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
}

.btn-hrv {
    display: inline-block;
    padding: 10px 10px;
    background: #ff6600;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
}

.btn-hrv:hover {
    background: #cc5500;
    text-decoration: none;
}


/* Ensure proper width for the items */
.item-carousel {
    width: 100%;
    overflow: hidden;  /* Prevent overflow issues */
}

/* Fix Owl Carousel’s outer wrapper */
.cooli-item-area .owl-carousel .owl-stage-outer {
    overflow: visible !important; /* Allow smooth visibility */
}

/* Fix for left-side clipping */
.cooli-item-area .owl-carousel .owl-stage {
    display: flex;
    margin-left: 0 !important;  /* Prevent unwanted shifting */
    padding-left: 0 !important;
    
}

/* Prevent first item from being hidden */
.cooli-item-area .owl-carousel .owl-item {
    display: flex;
    justify-content: center;
    min-width: 250px; /* Adjust if needed */
    
}


/* Styling for each card */
.single-cooli-item {
    width: 100%; /* Fixed width */

    border-radius: 20px !important; /* Fully rounded corners */
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease-in-out;
    margin: 20px;

}
.single-cooli-item .title{
    margin: 0px;
    padding: 2px;

}

.single-cooli-item:hover {
    transform: translateY(-5px); /* Moves the card slightly up on hover */
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15); /* Enhances the shadow on hover */
    border-radius: 20px;
}

.single-cooli-item .details{
   
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show only 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em; /* Adjust based on font size */


}


/* Add spacing between cards */
.owl-carousel .owl-stage {
    display: flex;
    justify-content: center;
    padding: 10px;
}

/* Fix the left margin issue */
.owl-stage-outer {
    padding-left: 20px;
    padding-right: 20px;
}

/* Navigation button fixes */
.owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.owl-nav button {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    transition: 0.3s;
}

.owl-nav button:hover {
    background: rgba(0, 0, 0, 0.5);
}


         /* Gallery Styling */
         .gallery-container {
            padding: 50px 0;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .gallery-item img {
            width: 100%;
            object-fit: cover;
            border-radius: 10px;
            transition: transform 0.3s ease-in-out;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .gallery-item:hover {
            transform: translateY(-5px);
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
        }

        /* Fade-in Animation */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s ease-out forwards;
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .product-img {
    width: 100%; /* Ensures it takes the full width of its container */
    height: 250px; /* Set a fixed height */
    object-fit: cover; /* Ensures the image fills the area without distortion */
    border-radius: 10px; /* Optional: Gives rounded corners */
}


/* Make navbar background transparent */
/* Navbar background */
.navbar {
    background: transparent;
    padding: 10px 0;
}

/* Align logo */
.navbar-brand {
    display: flex;
    align-items: center;
}

/* Align menu to the right */
.navbar-nav {
    text-align: right;
}

/* Style menu items */
.navbar-nav .nav-link {
    color: #002366; /* Dark Blue */
    font-weight: 600;
    padding: 5px 5px;
    transition: all 0.3s ease;
    font-size: 13px;
}

/* Hover effect */
.navbar-nav .nav-link:hover {
    background: rgba(0, 35, 102, 0.1);
    border-radius: 5px;
}
/* Topbar Styling */
.info-bar-area {
    background: rgba(0, 35, 102, 0.9); /* Dark Blue with slight transparency */
    color: #fff;
    padding: 0px 0;
    font-size: 14px;
    position: relative;
    border-radius: 0px 0px 40px 40px;
    overflow: hidden;
    margin: 0 50px; 
}

/* Align items */
.info-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

/* Single Info Item */
.single-info-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.single-info-item .icon {
    font-size: 16px;
    color: #fdd835; /* Yellow */
}

.single-info-item .details {
    font-weight: 500;
}

/* Social Media Icons */
.social-icons {
    display: flex;
    gap: 10px;
    margin-right: 15px;
}

.social-icons a {
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    padding: 5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icons a:hover {
    background: #fdd835; /* Yellow */
    color: #002366;
}

/* Get a Quote Button */
.rq-btn {
    background: #fdd835;
    color: #002366;
    font-weight: bold;
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 20px;
    transition: 0.3s;
}

.rq-btn:hover {
    background: #ffcc00;
    color: #002366;
}

.contact-card {
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 10px;
        transition: all 0.3s ease-in-out;
    }
    .contact-card:hover {
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(-5px);
    }
    .card-icon {
        font-size: 30px;
        color: #007bff;
        margin-bottom: 10px;
    }

    #product-details ul {
    list-style: none; /* Remove default bullets */
    padding-left: 20px;
}

#product-details ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 5px;
    font-size: 16px;
}

#product-details ul li::before {
    content: "●"; /* Bullet shape */
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(45deg, #300804, #ffcc00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    animation: pulse 1s infinite alternate;
}

#codeEditor {
    display: none;
    height: 90vh !important; /* Set height to 90% of the viewport */
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    background: #fff;
    overflow-y: auto;
}

/* Mobile responsive */
@media (max-width: 992px) {
    .navbar-nav {
        text-align: center;
    }
    .info-bar-area {
        text-align: center;
    }
    .info-items {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .social-icons {
        justify-content: center;
        margin-bottom: 10px;
    }
    .rq-btn {
        font-size: 12px;
        padding: 5px 10px;
    }
    
}

@media (max-width: 768px) { 
    
    .header-slider-area {
    margin: 0 10px; /* Adjust margin as needed */
}
.header-slider-item {
    height: 70vh;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    position: relative;
    padding: 50px 0;
}
.header-slider-area .title {
    font-size: 40px;
    text-align: center;
}
    /* Hero Section */
    .cooli-item-area{
        margin-top: 40px;
    }
    /* Card Slider */
    .single-cooli-item {
        margin-top: 30px;
        width: 100% !important; /* Full width on mobile */
        max-width: 350px;
        height: auto;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        padding: 15px;
        margin: 0 auto;
    }
.item-carousel{
    margin-top: 50px;
}
    /* Adjust spacing between slider cards */
    .owl-carousel .owl-stage-outer {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Fix navigation button positions */
    .owl-nav {
        top: 92%; /* Push buttons lower */
    }

    /* Ensure the button is easily clickable */
    .read {
        font-size: 14px;
        padding: 8px 15px;
    }
 .navbar-brand{
        padding-left: 30px;
    }
}