/* ===========================
   GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body {
    font-family: 'Poppins',sans-serif;
    color: #333;
    background: #fff;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ===========================
   CONTAINER
=========================== */

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* ===========================
   HEADER
=========================== */
.menu-toggle {
    display: none;
    font-size: 30px;
    cursor: pointer;
    color: #0056b3;
}
header {
    width: 100%;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

    header .container {
        max-width: 1200px;
        margin: auto;
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

/*header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#ffffff;
    z-index:1000;
    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

header .container{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;

}*/

.logo h2{

    color:#0056b3;
    font-size:26px;
    font-weight:700;

}

nav ul{

    display:flex;
    list-style:none;

}

nav ul li{

    margin-left:20px;

}

nav ul li a{

    color:#333;
    text-decoration:none;
    font-weight:500;
    transition:.3s;

}

nav ul li a:hover{

    color:#0056b3;

}

/* ===========================
   HERO
=========================== */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: calc(100vh - 80px);
    background: url("images/banner.png") no-repeat center center;
    padding: 80px 0;
    background-size: cover;
    overflow: hidden;
}

    .hero .container {
        position: relative;
        z-index: 2;
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

.hero-content {
    max-width: 600px;
    text-align: left;
    color: #fff;
    margin-left: 5%;
}

    .hero-content h1 {
        font-size: 60px;
        line-height: 1.1;
        margin-bottom: 20px;
        font-weight: 700;
    }

    .hero-content p {
        font-size: 20px;
        margin-bottom: 30px;
    }

.btn{

    display:inline-block;

    background:#0056b3;

    color:white;

    text-decoration:none;

    padding:15px 40px;

    border-radius:40px;

    transition:.3s;

    font-weight:600;

}

.btn:hover{

    background:#003d80;

    transform:translateY(-3px);

}

/* ===========================
   ABOUT
=========================== */

.about{

    padding:100px 0;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.about-image img{

    width:100%;

    border-radius:15px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.about-text h2{

    color:#0056b3;

    font-size:38px;

    margin-bottom:25px;

}

.about-text p{

    margin-bottom:18px;

    font-size:17px;

}

.btn2{

    display:inline-block;

    margin-top:20px;

    background:#0056b3;

    color:white;

    text-decoration:none;

    padding:14px 35px;

    border-radius:40px;

    transition:.3s;

}

.btn2:hover{

    background:#003d80;

}

button.btn2 {
    border: none;
    padding: 17px 36px;
    font-size: 16px;
}


/* ===========================
   FEATURES
=========================== */

.features{

    padding:60px 0;
    background:#f8fbff;

}

.features h2{

    text-align:center;
    font-size:40px;
    color:#0056b3;
    margin-bottom:10px;

}

.subtitle{

    text-align:center;
    color:#666;
    font-size:18px;
    margin-bottom:10px;

}

.cards{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.card{

    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.card img{

    width:100%;
    height:250px;
    object-fit:cover;
    display:block;

}

.card h3{

    font-size:24px;
    color:#0056b3;
    padding:20px 20px 10px;

}

.card p{

    padding:0 20px 25px;
    color:#555;
    font-size:16px;

}

/* ===========================
   PRODUCT SEARCH
=========================== */

.product-search{

    padding:30px 0;
    background:#ffffff;

}

.search-box{

    max-width:750px;
    margin:15px auto 0;
    position:relative;

}

.search-box input{

    width:100%;
    padding:18px 22px;
    border:2px solid #0056b3;
    border-radius:50px;
    font-size:18px;
    outline:none;
    transition:.3s;

}

.search-box input:focus{

    box-shadow:0 0 20px rgba(0,86,179,.20);

}

.search-box button{

    position:absolute;
    top:6px;
    right:6px;
    height:50px;
    padding:0 30px;
    border:none;
    border-radius:40px;
    background:#0056b3;
    color:#fff;
    font-size:16px;
    cursor:pointer;
    transition:.3s;

}

.search-box button:hover{

    background:#003d80;

}

/* ===========================
   SEARCH SUGGESTION
=========================== */

#suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    z-index: 999;
    max-height: 350px; /* Dropdown Height */

    overflow-y: auto; /* Vertical Scroll */

    overflow-x: hidden;
    display: none;
}
    /* Scrollbar */

    #suggestions::-webkit-scrollbar {
        width: 8px;
    }

    #suggestions::-webkit-scrollbar-track {
        background: #f5f5f5;
        border-radius: 10px;
    }

    #suggestions::-webkit-scrollbar-thumb {
        background: #0d5db8;
        border-radius: 10px;
    }

        #suggestions::-webkit-scrollbar-thumb:hover {
            background: #004ea8;
        }

/* Suggestion Item */

.suggestion-item {
    padding: 18px 25px;
    cursor: pointer;
    font-size: 18px;
    border-bottom: 1px solid #eee;
    transition: .3s;
}

    .suggestion-item:last-child {
        border-bottom: none;
    }

    .suggestion-item:hover {
        background: #0d5db8;
        color: #fff;
    }

#suggestions div{

    padding:15px 20px;
    cursor:pointer;
    transition:.3s;
    border-bottom:1px solid #eee;

}

#suggestions div:last-child{

    border-bottom:none;

}

#suggestions div:hover{

    background:#0056b3;
    color:#fff;

}

/* ===========================
   PDF MODAL
=========================== */

.modal{

    display:none;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.75);
    z-index:9999;

}

.modal-content{

    width:95%;
    height:92%;
    margin:2% auto;
    background:#fff;
    border-radius:15px;
    position:relative;
    overflow:hidden;
    animation:popup .3s ease;

}

@keyframes popup{

    from{

        transform:scale(.9);
        opacity:0;

    }

    to{

        transform:scale(1);
        opacity:1;

    }

}

.close{

    position:absolute;
    right:20px;
    top:12px;
    font-size:40px;
    cursor:pointer;
    color:#333;
    z-index:1000;

}

.close:hover{

    color:red;

}

#pdfViewer{

    width:100%;
    height:100%;
    border:none;

}

/* ==========================================
   CONTACT SECTION
========================================== */

.contact{

    padding:90px 0;
    background:#f7f9fc;

}

.contact-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:50px;

}

.contact-card{

    background:#fff;
    padding:35px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.3s;

}

.contact-card:hover{

    transform:translateY(-8px);

}

.contact-card h3{

    color:#0056b3;
    margin-bottom:15px;
    font-size:24px;

}

.contact-card p{

    color:#555;
    line-height:1.8;

}

/* ==========================================
   FOOTER
========================================== */

footer {
    background: #002147;
    color: #fff;
    padding: 60px 0 25px;
    text-align: center;
   
}

.footer-logo h2{

    font-size:32px;
    margin-bottom:10px;

}

footer p{

    color:#ddd;
    margin:12px 0;

}

footer hr{

    border:none;
    border-top:1px solid rgba(255,255,255,.2);
    margin:25px 0;

}

/* ==========================================
   SCROLL TO TOP
========================================== */

#topBtn{

    position:fixed;
    right:25px;
    bottom:25px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#0056b3;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    display:none;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    transition:.3s;
    z-index:999;

}

#topBtn:hover{

    background:#003d80;
    transform:translateY(-5px);

}

/* ==========================================
   SECTION SPACING
========================================== */

section{

    scroll-margin-top:90px;

}

/* ==========================================
   ANIMATIONS
========================================== */

.card,
.contact-card,
.about-image img,
.about-text,
.hero-content{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ==========================================
   TABLET
========================================== */

@media(max-width:992px){

    header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }

nav ul{

    margin-top:15px;
    flex-wrap:wrap;
    justify-content:center;

}

nav ul li{

    margin:10px 15px;

}

.hero{

    height:80vh;

}

.hero-content h1{

    font-size:42px;

}

.hero-content p{

    font-size:18px;

}

.about-grid{

    grid-template-columns:1fr;
    gap:40px;

}

.cards{

    grid-template-columns:repeat(2,1fr);

}

.contact-grid{

    grid-template-columns:1fr;

}

    .hero {
        min-height: 75vh;
        justify-content: center;
        background-position: center center;
    }


}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px) {

    .container {
        width: 92%;
    }

    /* Header */

    header {
        height: 70px;
    }

        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
        }

    .logo h2 {
        font-size: 20px;
    }

    .menu-toggle {
        display: block;
        font-size: 32px;
        cursor: pointer;
    }

    /* Navigation */

    nav {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: #fff;
        display: none;
        box-shadow: 0 10px 20px rgba(0,0,0,.15);
    }

        nav.active {
            display: block;
        }

        nav ul {
            display: flex;
            flex-direction: column;
        }

            nav ul li {
                margin: 0;
            }

                nav ul li a {
                    display: block;
                    padding: 16px 20px;
                    border-bottom: 1px solid #eee;
                }

    /* Hero */


    .hero {
        min-height: 60vh;
        /* Move image slightly right */
        background-position: 60% center;
        /* Optional if your image is narrow */
        background-size: cover;
    }

        .hero .container {
            justify-content: center;
        }

    .hero-content {
        margin-left: 0;
        padding: 20px;
        text-align: center;
    }

        .hero-content h1 {
            font-size: 34px;
        }

        .hero-content p {
            font-size: 16px;
        }


    /* About */

    .about-grid {
        grid-template-columns: 1fr;
    }

    /* Cards */

    .cards {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Search */

    .search-box button {
        position: relative;
        width: 100%;
        right: 0;
        top: 10px;
    }
}
/* ==========================================
   SMALL MOBILE
========================================== */

@media(max-width:480px){

.hero-content h1{

    font-size:26px;

}

.hero-content p{

    font-size:19px;

}

.about-text h2{

    font-size:26px;

}

.features h2{

    font-size:26px;

}

.subtitle{

    font-size:15px;

}

.card h3{

    font-size:22px;

}

.contact-card{

    padding:25px;

}

.contact-card h3{

    font-size:22px;

}

#topBtn{

    width:45px;
    height:45px;
    font-size:18px;

}

}


/* ==========================================
 Product Categories
========================================== */

/* ===========================
   Product Categories
=========================== */

.product-category-section {
    padding: 70px 0 30px;
    background: #fff;
}

.section-title {
    text-align: center;
    font-size: 36px;
    color: #003366;
    margin-bottom: 10px;
    font-weight: 700;
}

.section-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 20px;
}

.category-card {
    background: #fff;
    border: 2px solid #0056b3;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #0056b3;
    cursor: pointer;
    transition: .3s;
}

    .category-card:hover {
        background: #0056b3;
        color: #fff;
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,.15);
    }

/* Mobile */

@media(max-width:768px) {

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

    .category-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 15px;
    }

    .category-card {
        font-size: 15px;
        padding: 15px;
    }
}

@media(max-width:480px) {

    .category-grid {
        grid-template-columns: 1fr;
    }
}


/*//whatsapp icon*/
.whatsapp-link {
    color: #25D366;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.whatsapp-link:hover {
    color: #128C7E;
    text-decoration: underline;
}


/*---- category popup*/
.category-popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.55);
    z-index: 9999;
}

.popup-box {
    /*width: 500px;*/
    max-width: 95%;
    background: #fff;
    margin: 70px auto;
    border-radius: 10px;
    overflow: hidden;
}

.popup-header {
    background: #0056b3;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

    .popup-header h2 {
        margin: 0;
    }

#closePopup {
    font-size: 30px;
    cursor: pointer;
}

/*whatsapp icon*/
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    padding: 5px 15px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: .3s;
}

    .whatsapp-btn i {
        font-size: 24px;
    }

    .whatsapp-btn:hover {
        background: #1ebe5d;
        transform: translateY(-2px);
    }

.whatsapp-note {
    margin-top: 12px;
    color: #666;
    font-size: 14px;
}




/*-----------------send enquiry popup*/
    .popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 9999;
}

.popup-content {
    width: 500px;
    max-width: 90%;
    background: #fff;
    margin: 8% auto;
    padding: 25px;
    border-radius: 8px;
    position: relative;
}

    .popup-content textarea {
        width: 100%;
        height: 180px;
        resize: vertical;
        padding: 10px;
        font-size: 15px;
        margin: 15px 0;
    }

.close-popup {
    position: absolute;
    right: 20px;
    top: 15px;
    cursor: pointer;
    font-size: 28px;
}


/*logo*/
.bannerlogo {
    display: flex;
    align-items: center;
    padding: 10px;
    height: 50%;
    width: 50%;
}

    .bannerlogo img {
        width: 220px;
        height: auto;
        display: block;
    }
/*================ TABLET ================*/

@media (max-width:992px) {

    .bannerlogo img {
        width: 180px;
    }

    nav ul {
        gap: 10px;
    }
}

/*================ MOBILE ================*/

@media (max-width:768px) {

    header .container {
        padding: 10px 15px;
        flex-wrap: nowrap;
    }

    .bannerlogo img {
        width: 150px;
    }

    .menu-toggle {
        display: block;
    }

    nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        display: none;
        box-shadow: 0 8px 15px rgba(0,0,0,.1);
    }

        nav.active {
            display: block;
        }

        nav ul {
            flex-direction: column;
            gap: 0;
        }

            nav ul li {
                width: 100%;
                border-bottom: 1px solid #eee;
            }

                nav ul li a {
                    display: block;
                    padding: 15px;
                }
}

nav ul li a {
    color: #222;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    padding: 15px 18px;
    border-radius: 30px;
    transition: .3s ease;
    white-space: nowrap;
}

    nav ul li a:hover {
        background: #0056b3;
        color: #fff;
        box-shadow: 0 5px 15px rgba(13,110,253,.3);
    }


/*Display product table-image after search*/
.product-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    padding:30px;
}

.product-table {
    width: 70%;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.product-image {
    width: 30%;
}

    .product-image img {
        width: 100%;
        height: auto;
    }

.product-layout.no-image {
    justify-content: center;
}

    .product-layout.no-image .product-table {
        width: 80%;
        margin: 0 auto;
    }

@media(max-width:768px) {
    .product-layout {
        flex-direction: column;
    }

    .product-table,
    .product-image {
        width: 100%;
    }
}


/*Estimation cart popup*/
.estimationPopup .modal-content {
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    box-sizing: border-box;
}

 .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.estimationTable .table {
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
}

    .estimationTable .table td,
    .estimationTable .table th {
        white-space: normal;
        word-break: break-word;
        vertical-align: top;
    }

@media (max-width:768px) {

    .estimationPopup .modal-content {
        width: 95%;
        max-width: 900px;
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px;
        box-sizing: border-box;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    .estimationTable .table {
        width: 100%;
        table-layout: fixed;
        word-wrap: break-word;
    }

        .estimationTable .table td,
        .estimationTable .table th {
            white-space: normal;
            word-break: break-word;
            vertical-align: top;
        }
}

/*Print*/

    @media print {

        body {
            margin: 0;
            padding: 10px;
        }

        .table-responsive {
            overflow: visible !important;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            page-break-inside: auto;
        }

        thead {
            display: table-header-group;
        }

        tfoot {
            display: table-footer-group;
        }

        tr {
            page-break-inside: avoid;
            break-inside: avoid;
        }

        td, th {
            page-break-inside: avoid;
            break-inside: avoid;
        }

        .invoice-table th:last-child,
        .invoice-table td:last-child {
            display: none;
        }

        .no-print {
            display: none !important;
        }
    }
/*End Print*/

/*quotation-btn*/
.quotation-btn-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
}


@media(max-width:768px) {

    .quotation-btn-wrapper {
        margin: 10px 0;
        padding: 0 15px;
    }

  
}


/*set navbar to right responsive*/
/* Large Desktop */
#navbar {
    margin-left: 400px;
}

/* Laptop */
@media (max-width: 1200px) {
    #navbar {
        margin-left: 250px;
    }
}

/* Tablet */
@media (max-width: 992px) {
    #navbar {
        margin-left: 120px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    #navbar {
        margin-left: 0;
    }
}


.table-dark th {
    background-color: #0056b3 !important;
}