/* 🔥 Full Header Sticky */
.full-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    
}

.full-header {
    transition: 0.3s;
}

.full-header.scrolled {
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
/* Prevent content hiding under header */


.body {
    padding-top: 0; /* usually not needed with sticky */
    
}


/* Full Header Sticky */
.full-header {
    position: sticky;
    top: 0;
    z-index: 9999;
}

/* Ensure each section keeps its own color */
.top-bar {
    background: #000066;
    color: #fff;
    font-size: 14px;
}

.main-header {
    background: #fff;
}

.main-navbar {
    background: #00004d;
}


/* Text */
.top-text {
    font-weight: 500;
}

/* Right Section */
.top-right {
    gap: 15px;
}

/* Items */
.top-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Phone Highlight */
.top-item.phone {
    background: #1e73be;
    padding: 3px 10px;
    border-radius: 3px;
}

/* Icons */
.top-item i {
    font-size: 14px;
}

/* Social Icons */
.social-icons a {
    color: #fff;
    margin-left: 8px;
    font-size: 14px;
}

.social-icons a:hover {
    color: #00c6ff;
}



/* Top Bar Layout */
.top-bar .container {
    display: flex;
    align-items: center;        /* 🔥 SAME HEIGHT ALIGN */
    justify-content: space-between;
}



@media (max-width: 768px) {

    .top-bar .container {
        flex-direction: column;
        text-align: center;
    }

    .top-right {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 5px;
    }

    .top-item {
        justify-content: center;
    }
}



/*  Header */
.main-header {
    background: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.logo {
    max-height: 60px;
}

/* Contact Box */
.contact-box {
    border-left: 1px solid #ddd;
    padding: 10px;
    font-size: 14px;
}

.icon-box {
    background: #00004d;
    color: #fff;
    padding: 10px;
    margin-right: 10px;
    border-radius: 5px;
}

/*  Navbar */
.main-navbar {
    background: #00004d;
padding: 15px 0;   /* 🔥 increase height */
}




.main-navbar .nav-link {
    color: #fff;
   padding: 10px 15px;
  font-size: 16px;
   font-weight: 700;
}

.main-navbar .nav-link:hover {
    color: #00c6ff;
}

/* Active Menu */
.main-navbar .nav-link.active {
    color: #00c6ff !important;
    font-weight: 600;
    background-color:#ffffff;
    border-radius: 5px;
}
@media (max-width: 991px) {

    .main-navbar .nav-link.active {
        display: inline-block;   /* 🔥 stops full width */
        width: auto;             /* shrink to content */
        padding: 6px 12px;       /* adjust size */
        margin-left: 10px;
        margin-top:10px; ;       /* little spacing from left */
    }

}
/* 🔥 Mobile Menu Overlay Fix */
@media (max-width: 991px) {

    .navbar-collapse {
        position: absolute;
        top: 100%;              /* just below navbar */
        left: 0;
        width: 100%;
        background: #00004d;    /* same as navbar */
        z-index: 9999;          /* 🔥 above WOW slider */
        padding: 10px 0;
    }

    .navbar {
        position: relative;
        z-index: 10000;         /* keep navbar above everything */
    }

}

.navbar-collapse.show {
        box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    }

}

/* Dropdown Fix */
.dropdown-menu {
    border-radius: 0;
}

.dropdown-item:hover {
    background: #00004d;
    color: #fff;
}

/* Mobile Menu Left Align */
@media (max-width: 991px) {

    .navbar-nav {
        text-align: left !important;
    }

    .navbar-nav .nav-link {
        text-align: left !important;
        padding-left: 15px;
    }

    .navbar-collapse {
        text-align: left;
    }
}

/*  Responsive Fix */
@media (max-width: 768px) {

    .contact-box {
        border-left: none;
        text-align: center;
    }

    .icon-box {
        margin: auto;
    }

    .main-header .row {
        text-align: center;
    }

    .navbar-nav {
        text-align: center;
    }
}

/* import from website */

/* Section Background */
.about-section {
    background: #f5f7fa;
}

/* Subtitle (ABOUT US) */
.about-subtitle {
    font-size: 14px;
    color: #666;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.about-subtitle::before,
.about-subtitle::after {
    content: "";
    width: 40px;
    height: 2px;
    background: #0d6efd;
    position: absolute;
    top: 50%;
}

.about-subtitle::before {
    left: -50px;
}

.about-subtitle::after {
    right: -50px;
}

/* Main Title */
.about-title {
    font-size: 30px;
    font-weight: 700;
    color: #1e73be;
    text-transform: uppercase;
}

/* Highlight Text */
.about-highlight {
    color: #007bff;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Paragraph */
.about-section p {
    color: #444;
    font-size: 15px;
    line-height: 1.7;
    text-align: justify;
}

/* Button */
.about-btn {
    background: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 15px;
    display: inline-block;
}


.about-btn:hover {
    background: #0056b3;
    color: #fff;
}



/* Fix Button Width in Mobile */
/* Force LEFT align button in mobile */
@media (max-width: 768px) {

    .about-section {
        text-align: left !important;   /* override center */
    }

    .about-btn {
        display: inline-block;
        width: auto;
        margin: 15px 0 0 0;            /* remove auto center */
        float: left;                   /* 🔥 force left */
    }

}


/* Image Box Control */
.about-image-box {
    max-width: 520px;     /* 🔥 control size */
    margin-left: auto;    /* keep right aligned */
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Image */
.about-image-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* Align image top perfectly */
.about-image-box {
    margin-top: 10px;   /* adjust if needed */
}

@media (max-width: 768px) {

    .about-image-box {
        margin: 20px auto 0;
        max-width: 100%;
    }

}
/* Image Box Control */

@media (max-width: 768px) {

    .about-title {
        font-size: 22px;
    }

    .about-subtitle::before,
    .about-subtitle::after {
        display: none;
    }

    .about-section {
        text-align: center;
    }

}

/* tservice section start  */

/* Section Background */
.service-section {
    background: #f5f7fa;
}

/* Subtitle */
.section-subtitle {
    font-size: 16px;
    color: #777;
    position: relative;
}


/* Left Line */
.section-subtitle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -50px;
    width: 40px;
    height: 2px;
    background: #00c6ff;
    transform: translateY(-50%);
}

/* Right Line */
.section-subtitle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -50px;
    width: 40px;
    height: 2px;
    background: #00c6ff;
    transform: translateY(-50%);
}

@media (max-width: 768px) {

    .section-subtitle::before,
    .section-subtitle::after {
        display: none;   /* hide lines in mobile */
    }

}
.section-title {
    font-size: 28px;
    font-weight: 700;
    color: #0b2c6b;
}
/* Title Link */
.service-title a {
    text-decoration: none;
    color: #0b2c6b;
    font-weight: 600;
    position: relative;
    transition: 0.3s;
}

/* Hover Color */
.service-title a:hover {
    color: #00c6ff;
}

/* 🔥 Underline Animation */
.service-title a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: #00c6ff;
    transition: 0.4s;
}

/* Hover Effect */
.service-title a:hover::after {
    width: 100%;
}

/* Box */
.service-box {
    background: #fff;
    padding: 20px;
    border: 2px solid #eee;
    position: relative;
    transition: 0.4s;
    overflow: hidden;
    border-radius: 9px;
}

/* 🔥 Angled Border Effect */
.service-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, #00c6ff, transparent);
    transition: 0.5s;
}

.service-box:hover::before {
    left: 100%;
}

/* Hover Border */
.service-box:hover {
    border-color: #00c6ff;
    transform: translateY(-5px);
}

/* Title */
.service-title {
    font-weight: 600;
    margin-bottom: 15px;
    text-align: left;
}

/* Image */
.service-img {
    text-align: center;
    margin-bottom: 15px;
}

/* Bigger Image */
.service-img img {
    width: 100%;          /* full width of box */
    height: 100%;        /* 🔥 increase height */
    object-fit: cover;    /* maintain good look */
    border-radius: 9px;
}

/* Image Zoom Effect */
.service-img {
    overflow: hidden;
}

.service-img img {
    transition: 0.4s;

}

.service-box:hover .service-img img {
    transform: scale(1.1);
    border-radius: 9px;
}
@media (max-width: 768px) {
    .service-img img {
        height: 180px;
    }
}
/* Button */
.service-btn {
    display: inline-block;
    background: #0b2c6b;
    color: #fff;
    padding: 8px 18px;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s;
}

/* Hover Effect */
.service-btn:hover {
    background: #00c6ff;
    color: #fff;
}

@media (max-width: 768px) {

    .service-title {
        text-align: left;
    }

    .service-img {
        text-align: center;
    }

    .service-btn {
        display: inline-block;
        margin-top: 10px;
    }

}
/* Service Section end  */


/* Products Gallery Start */

/* Section */
.gallery-section {
    background: #f5f7fa;
}

/* Subtitle with lines */
.section-subtitle {
    position: relative;
    display: inline-block;
    padding: 0 15px;
    color: #777;
}

.section-subtitle::before,
.section-subtitle::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background: #00c6ff;
}

.section-subtitle::before {
    left: -50px;
}

.section-subtitle::after {
    right: -50px;
}

/* Gallery Box */
.gallery-box {
    position: relative;
    overflow: hidden;
    border-radius: 9px;
}

.gallery-box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Overlay */
.gallery-box .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
}

/* Zoom Icon */
.gallery-box .overlay i {
    color: #fff;
    font-size: 30px;
}

/* Hover Effect */
.gallery-box:hover .overlay {
    opacity: 1;
}

/* Button */
.view-more-btn {
    display: inline-block;
    background: #00004d;
    color: #fff;
    padding: 8px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: 0.3s;
}

/* Hover */
.view-more-btn:hover {
    background: #00c6ff;
    color: #fff;
}


/* Mobile View */

@media (max-width: 768px) {

    .gallery-box img {
        height: 150px;
    }

    .section-subtitle::before,
    .section-subtitle::after {
        display: none;
    }

}

/* Products Gallery end */

/* Video Gallery Start */


/* Section */
.video-section {
    background: #f5f7fa;
}

/* Subtitle with lines */
.section-subtitle {
    position: relative;
    display: inline-block;
    padding: 0 15px;
    color: #777;
}

.section-subtitle::before,
.section-subtitle::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background: #00c6ff;
}

.section-subtitle::before {
    left: -50px;
}

.section-subtitle::after {
    right: -50px;
}

/* Video Box */
.video-box {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
}

.video-box img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* Overlay */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

/* Play Icon */
.video-overlay i {
    font-size: 50px;
    color: #fff;
    transition: 0.3s;
}

/* Hover Effect */
.video-box:hover .video-overlay {
    background: rgba(0,0,0,0.6);
}

.video-box:hover .video-overlay i {
    transform: scale(1.2);
    color: #00c6ff;
}

/* Title */
.video-title {
    margin-top: 10px;
    font-weight: 600;
    text-align: left;
}


@media (max-width: 768px) {

    .video-box img {
        height: 180px;
    }

    .section-subtitle::before,
    .section-subtitle::after {
        display: none;
    }

}
/* Video Gallery END  */

/* FOOTER START  */

/* Footer Main */
.footer-section {
    background: #000033;
    color: #fff;
    padding-top: 40px;
}

/* Title */
/* Footer Title */
.footer-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;   /* 🔥 IMPORTANT */
}

/* Underline */
.footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
   width: 50px;
    height: 3px;
    background: linear-gradient(to right, #00c6ff, #0072ff);
}



/* Text */
.footer-section p {
    font-size: 15px;
    text-align: justify;
    line-height: 1.7;
}
}

/* Footer Links */
/* 🔥 FORCE REMOVE ALL BULLETS */
.footer-links,
.footer-links li {
    list-style: none !important;
}

/* Remove browser default padding */
.footer-links {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* List item */
.footer-links li {
    position: relative;
    margin-bottom: 8px;
}

/* 🔥 Remove ::marker (new browsers) */
.footer-links li::marker {
    content: "" !important;
}

/* Arrow icon */
.footer-links li::before {
    content: "\f285";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 3px;
    color: #00c6ff;
    font-size: 12px;
}

/* Link */
.footer-links a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding-left: 18px;
}

/* Hover */
.footer-links li:hover::before {
    left: 5px;
    color: #fff;
}

.footer-links a:hover {
    color: #00c6ff;
}


/* Middle Row */
.footer-middle {
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    text-align: center;        /* horizontal center */
    width: 100%;
}

.footer-middle p {
    margin: 0 auto;
    text-align: center;
}

/* Bottom */
.footer-bottom {
    font-size: 13px;
}




/* 🔥 Force LEFT align in Mobile */
@media (max-width: 768px) {

    .footer-section {
        text-align: left !important;
    }

    .footer-links {
        text-align: left !important;
        padding-left: 0 !important;
    }

    .footer-links li {
        text-align: left !important;
         margin-bottom: 10px;
    }

    .footer-links a {
        text-align: left !important;
        display: block;
    }

    /* Fix heading alignment */
    .footer-title {
        text-align: left !important;
    }

}



/* Social Icons */
.footer-social {
    margin-top: 15px;
}

.footer-social a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 50%;
    margin-right: 8px;
    transition: 0.3s;
}

/* Hover Effect 🔥 */
.footer-social a:hover {
    background: #00c6ff;
    color: #fff;
    transform: translateY(-3px);
}

/* Go to Top Button */
#goTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: 45px;
    height: 45px;
    background: #ffffff;
    color:  #00004d;
    border: 1px dotted #00004d;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    z-index: 9999;
    transition: 0.3s;
}

/* Hover Effect 🔥 */
#goTopBtn:hover {
    background: #00c6ff;
    transform: translateY(-3px);
    color:  #ffffff;
     border: none;
}

/* About us */

/* 🔷 Breadcrumb */

.breadcrumb-area {
    background: url('img/water-bg.png') no-repeat center;
    background-size: cover;
    padding: 60px 0;
    color: #fff;
    position: relative;
}

.breadcrumb-area::before {
    content: "";
    position: absolute;
    top:0; left:0;
    width:100%; height:100%;
    
}

/* Content Box as Button */


/* Content Box */
.breadcrumb-content {
    display: inline-flex;          /* 🔥 makes same line */
    align-items: center;           /* vertical center */
    gap: 15px;                     /* space between H1 & p */
    padding: 12px 25px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    transition: 0.3s;
}

/* Hover */
.breadcrumb-content:hover {
    background: #00c6ff;
}

/* H1 */
.breadcrumb-content h1 {
    margin: 0;
    font-size: 28px;
    color: #fff;
}

/* Text */
.breadcrumb-content p {
    margin: 0;
    color: #ddd;
    font-size: 14px;
}

/* Link */
.breadcrumb-content a {
    color: #fff;
    text-decoration: none;
}

/* Hover Text Color */
.breadcrumb-content:hover h1,
.breadcrumb-content:hover p,
.breadcrumb-content:hover a {
    color: #000;
}






/* Hover Effect 🔥 */
.breadcrumb-content:hover {
    background: #00c6ff;
}

/* Title */
.breadcrumb-content h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
}

/* Text */
.breadcrumb-content p {
    margin: 5px 0 0;
    color: #ddd;
}

/* Link */
.breadcrumb-content a {
    color: #fff;
    text-decoration: none;
}

/* Hover text color */
.breadcrumb-content:hover h1,
.breadcrumb-content:hover p,
.breadcrumb-content:hover a {
    color: #000;
}

.breadcrumb-area .container {
    position: relative;
    z-index: 2;
}

.breadcrumb-area h1 {
    font-size: 36px;
    font-weight: 700;
}

.breadcrumb-area a {
    color: #00c6ff;
    text-decoration: none;
}

/* About Button */
.about-btn {
    display: inline-block;
    background: #00004d;
    color: #fff;
    padding: 8px 20px;
    text-decoration: none;
    border-radius: 4px;
}

.about-btn:hover {
    background: #00c6ff;
}

/* Mission Box */
.mission-box {
    background: #fff;
    padding: 20px;
    border-left: 4px solid #00c6ff;
}

.mission-box i {
    font-size: 30px;
    color: #00c6ff;
}

/* Why Section */
.why-box {
    text-align: center;
    padding: 20px;
    border: 1px solid #eee;
    transition: 0.3s;
}

.why-box i {
    font-size: 30px;
    color: #00004d;
}

.why-box:hover {
    background: #00004d;
    color: #fff;
}

.why-box:hover i {
    color: #00c6ff;
}

@media (max-width: 576px) {

    .breadcrumb-content {
        flex-direction: column;   /* stack in mobile */
        gap: 5px;
    }

}

kbd {
    background-color: #00004d;  /* your theme color */
    color: #fff;               /* text color */
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
}
kbd:hover {
    background: #00c6ff;
    color: #000;
    cursor: pointer;
}


/* Section Background */
.company-overview {
    background: #f8f9fa;
}




.overview-table {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.overview-table i {
    margin-right: 8px;
    color: #00c6ff;
    font-size: 16px;
}

.overview-table i:hover {
    margin-right: 8px;
    color: #ffffff;
    font-size: 16px;
}



/* Table Base */
.overview-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 8px;
}

/* Left Column (Heading) */
.overview-table th {
    width: 35%;
    background: #00004d;   /* 🔵 Dark Blue */
    color: #fff;
    padding: 12px;
    font-weight: 600;
}

/* Right Column (Data) */
.overview-table td {
    background: #f5f7fa;   /* ⚪ Light Color */
    padding: 12px;
    font-weight: 700;      /* 🔥 Bold Text */
    color: #333;
}

/* Row Border */
.overview-table tr {
    border-bottom: 1px solid #ddd;
}

/* Hover Effect 🔥 */
.overview-table tr:hover td {
    background: #e6f2ff;
}

/* Icon Style */
.overview-table i {
    margin-right: 8px;
    color: #00c6ff;
    font-size: 16px;
}

.overview-table th {
    background: #01011c;
background: linear-gradient(90deg,rgba(1, 1, 28, 1) 0%, rgba(8, 8, 189, 1) 35%, rgba(185, 226, 237, 1) 100%);
}





@media (max-width: 768px) {

    .overview-table th,
    .overview-table td {
        display: block;
        width: 100%;
    }

}

/


/* ==================================
PRODUCTS SECTION
================================== */

.provide-products{
background:#f7faff;
}

.section-subtitle{
display:inline-block;
color:#0d6efd;
font-size:14px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:10px;
}

.section-title{
font-size:42px;
font-weight:700;
color:#0b2341;
margin-bottom:15px;
}

.section-desc{
max-width:800px;
margin:auto;
color:#666;
font-size:16px;
}

/* Product Card */

.product-box{
background:#fff;
padding:35px 25px;
text-align:center;
border-radius:15px;
position:relative;
overflow:hidden;
transition:all .4s ease;
border:1px solid #e8eef7;
height:100%;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

/* Top Gradient Border */

.product-box::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:linear-gradient(90deg,#003b95,#00b4ff);
}

/* Hover Effect */

.product-box:hover{
transform:translateY(-10px);
box-shadow:0 15px 35px rgba(0,0,0,0.12);
}

/* Icon */

.product-icon{
width:85px;
height:85px;
margin:0 auto 20px;
border-radius:50%;
background:linear-gradient(135deg,#003b95,#00b4ff);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:34px;
}

/* Title */

.product-box h5{
font-size:22px;
font-weight:700;
color:#0b2341;
margin-bottom:15px;
}

/* Description */

.product-box p{
font-size:15px;
color:#666;
line-height:1.7;
margin-bottom:20px;
}

/* Button */

.product-btn{
display:inline-block;
padding:10px 24px;
border-radius:30px;
text-decoration:none;
background:#003b95;
color:#fff;
font-weight:600;
transition:.3s;
}

.product-btn:hover

/* Mobile Responsive */

@media(max-width:991px){

```
.section-title{
    font-size:34px;
}
```

}

@media(max-width:768px){

```
.section-title{
    font-size:28px;
}

.section-desc{
    font-size:14px;
}

.product-box{
    padding:25px 20px;
}

.product-icon{
    width:70px;
    height:70px;
    font-size:28px;
}

.product-box h5{
    font-size:20px;
}

.product-box p{
    font-size:14px;
}
```

}

/* Section Background */
.why-us {
    background: #fff;
}

/* Box */
.why-box {
    background: #f5f7fa;
    padding: 25px;
    text-align: center;
    border-radius: 8px;
    transition: 0.3s;
    border: 1px solid #eee;
    position: relative;
}

/* Hover Effect 🔥 */
.why-box:hover {
    transform: translateY(-8px);
    background: #00004d;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Icon */
.why-icon {
    font-size: 35px;
    color: #00c6ff;
    margin-bottom: 15px;
}

/* Icon change on hover */
.why-box:hover .why-icon {
    color: #fff;
}

/* Title */
.why-box h5 {
    font-weight: 700;
    margin-bottom: 10px;
}

/* Text */
.why-box p {
    font-size: 14px;
    color: #555;
}

/* Text hover */
.why-box:hover p {
    color: #ddd;
}
@media (max-width: 768px) {

    .why-box {
        padding: 20px 15px;
    }

    .why-icon {
        font-size: 28px;
    }

    .why-box h5 {
        font-size: 18px;
    }

    .why-box p {
        font-size: 13px;
    }

}
.why-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: 0.3s;
}

.why-box:hover::before {
    border-color: #00c6ff;
}

/* Intro Section */
.filter-intro {
    background: #f5f7fa;
}

.filter-desc {
   
    margin: auto;
    color: #555;
}

.filter-desc p {
    text-align: justify;
     
}

/* Product Section */
.filter-detail {
    border-bottom: 1px solid #eee;
}
.filter-detail p {
    text-align: justify;
}

/* Image */
/* Image Container (IMPORTANT) */
.filter-img {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

/* Image */
/* Container */
.filter-img {
    position: relative;
    overflow: hidden;
    display: block;
}

/* Image */
.filter-img img {
    width: 100%;
    border: 1px solid #000066;
    border-radius: 8px;
    transition: 0.3s;
}

.filter-img img:hover {
    border: 2px solid #00c6ff;
    border-radius: 15px;
    
}


/* Title */
.product-title {
    font-weight: 700;
    margin-bottom: 15px;
}

/* Stylish List 🔥 */
.product-list {
    list-style: none;
    padding: 0;
}

.product-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #444;
}

/* Icon before list */
.product-list li::before {
    content: "\f26a"; /* check icon */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    color: #00c6ff;
}

/* Button */
.enquiry-btn{
    background:#0d6efd;
    color:#fff;
    padding:10px 20px;
    text-decoration:none;
    border-radius:5px;
    font-weight:600;
}

.enquiry-btn:hover{
    color:#fff;
}

.whatsapp-btn{
    width:45px;
    height:45px;
    background:#25D366;
    color:#fff !important;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    margin-left:10px;
    font-size:24px;
    transition:0.3s;
}

.whatsapp-btn:hover{
    background:#128C7E;
    color:#fff;
    transform:scale(1.1);
}

@media (max-width: 768px) {

    .filter-detail .row {
        text-align: center;
    }

    .product-title {
        margin-top: 15px;
    }

    .product-list li {
        text-align: left;
    }

}
@media (max-width: 768px) {

    .filter-detail .row {
        text-align: center;
    }

    .product-title {
        margin-top: 15px;
    }

    .product-list li {
        text-align: left;
    }

}


/* Table in Products Page */

/* Table Base */
.custom-table {
    border-collapse: collapse;
    width: 100%;
    overflow: hidden;
}

/* Header */

    .custom-table thead th {
    background-color: #00004d !important;
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 600;
    border-color: #00004d;
}

/* Cells */
.custom-table th,
.custom-table td {
    padding: 12px;
    border: 1px solid #eee;
    position: relative;
    transition: 0.3s;
}

/* Row Hover */
.custom-table tbody tr:hover {
    background: #00c6ff;
    color: #000;
}

/* 🔥 COLUMN HOVER MAGIC */
.custom-table td:hover::after,
.custom-table th:hover::after {
    content: "";
    position: absolute;
    top: -500px;
    bottom: -500px;
    left: 0;
    right: 0;
    background: rgba(0, 198, 255, 0.2);
    z-index: -1;
}

/* Hover Cell Highlight */
.custom-table td:hover,
.custom-table th:hover {
    background: #00c6ff;
    color: #000;
    z-index: 1;
}

/* Smooth Effect */
.custom-table tbody tr td {
    transition: 0.3s;
}

.custom-table td:hover,
.custom-table th:hover {
    box-shadow: 0 0 10px rgba(0,198,255,0.5);
}

@media (max-width: 768px) {
    .custom-table th,
    .custom-table td {
        font-size: 13px;
        padding: 8px;
    }
}

@media (max-width: 768px) {
    .text-end {
        text-align: center !important;

    }
}

.enquiry-btn {
        margin-left: 3px;
    }
}
@media (max-width: 768px) {
    .enquiry-btn {
        margin-left: 2px;
        text-align: center !important;
    }
}



/* Catalog Section */
.catalog-section {
    background: #f5f7fa;
}

/* Box */
.catalog-box {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    transition: 0.3s;
    border: 1px solid #eee;
}

.catalog-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Image */
.catalog-img {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.catalog-img img {
    width: 100%;
    transition: 0.4s;
}

/* Overlay */
.catalog-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,77,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
}

.catalog-overlay i {
    color: #fff;
    font-size: 30px;
}

/* Hover */
.catalog-img:hover img {
    transform: scale(1.1);
}

.catalog-img:hover .catalog-overlay {
    opacity: 1;
}

/* Title */
.catalog-title {
    margin-top: 15px;
    font-weight: 600;
}

/* 🔥 LIGHTBOX */

#catalogLightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
}



#catalogLightbox img {
    max-width: 80%;
    border-radius: 8px;
}

.download-btn {
    margin-top: 20px;
    padding: 10px 25px;
    background: #00c6ff;
    color: #000;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
    display: inline-block;
}

.download-btn:hover {
    background: #fff;
    color: #00004d;
}

/* Close */
.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 35px;
    color: #fff;
    cursor: pointer;
}

/* Download Button */
.download-btn {
    margin-top: 20px;
    padding: 8px 20px;
    background: #00c6ff;
    color: #000;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

.download-btn:hover {
    background: #fff;
}

@media (max-width: 768px) {

    .catalog-box {
        padding: 15px;
    }

    .catalog-title {
        font-size: 16px;
    }

    #catalogLightbox img {
        max-width: 95%;
    }

}

/* Catalog Section */

/* contact-section */
.contact-section {
    background: #f5f7fa;
}

/* Contact Info */
.contact-info {
    background: #00004d;
    color: #fff;
    padding: 30px;
    border-radius: 8px;
}

.contact-info h5 {
    margin-bottom: 20px;
    font-weight: 600;
}

.contact-info p {
    margin-bottom: 10px;
    font-size: 14px;
}

.contact-info i {
    margin-right: 10px;
    color: #00c6ff;
}

/* PDF Button */
.pdf-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 20px;
    background: #00c6ff;
    color: #000;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

.pdf-btn:hover {
    background: #fff;
    color: #00004d;
}

/* Form */
.contact-form {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* Inputs */
.form-control {
    border-radius: 4px;
    font-size: 14px;
}

/* Button */
.contact-btn {
    background: #00004d;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    transition: 0.3s;
}

.contact-btn:hover {
    background: #00c6ff;
    color: #000;
}

/* Map */
.map iframe {
    border-radius: 8px;
}

@media (max-width: 768px) {

    .contact-info,
    .contact-form {
        padding: 20px;
    }

    .contact-btn {
        width: 100%;
    }

}