/* ==========================
   GLOBAL
========================== */

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

html{
    scroll-behavior:smooth;
}

:root{
    --primary-700:#0f3a5b;
    --primary-600:#0d3b66;
    --accent:#ffd166;
    --cta:#0d6efd;
    --muted:#666666;
}

/* Alternate palette (apply .alt-theme on body to switch) */
.alt-theme{
    --primary-700:#1f4b3f;
    --primary-600:#2a7f62;
    --accent:#ffb347;
    --cta:#0b9bd6;
    --muted:#5a5a5a;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background:#f5f5f5;
    color:#333;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
    padding:0;
    margin:0;
}

/* ==========================
   TOP BAR
========================== */

.topbar{
    background: linear-gradient(135deg, #ffcc00 100%, #ff6b35 45%, #d81b60 100%);
    color:#ffffff;
    padding:8px 0;
    font-size:14px;
    font-weight:700;
    letter-spacing:0.03em;
    border-bottom:1px solid rgba(255,255,255,0.2);
    box-shadow:0 2px 10px rgba(216,27,96,0.18);
}

/* ==========================
   NAVBAR
========================== */

.navbar{
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

/* Classic professional navbar */
.navbar-custom{
    background: linear-gradient(90deg,var(--primary-700) 0%,var(--primary-600) 100%);
}
.navbar-custom .navbar-brand,
.navbar-custom .nav-link{
    color:#ffffff !important;
}
.navbar-custom .nav-link:hover{
    color:var(--accent) !important;
}

.navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler{
    border-color: rgba(255,255,255,0.8) !important;
}

.navbar-brand{
    font-size:26px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
}

.navbar-brand img,
.navbar-logo{
    width:56px;
    height:auto;
    max-height:56px;
    object-fit:contain;
    flex-shrink:0;
    display:block;
}

.nav-link{
    font-weight:600;
    margin-left:10px;
}

.nav-link:hover{
    color:#ffc107 !important;
}

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

.hero{
    position:relative;
    height:550px;
    background:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1800')
    center center/cover no-repeat;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
}

.hero-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
}

.hero h1{
    font-size:58px;
    font-weight:700;
}

.hero p{
    font-size:22px;
    margin-top:15px;
    margin-bottom:25px;
}

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

#searchInput{
    border-radius:50px;
    padding:15px 25px;
    border:2px solid #ddd;
}

#searchInput:focus{
    border-color:#0d6efd;
    box-shadow:none;
}

/* ==========================
   PRODUCT SECTION
========================== */

.product-card{
    border:none;
    overflow:hidden;
    transition:.4s;
    border-radius:15px;
    background:#fff;
}

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

.product-img{
    height:260px;
    object-fit:cover;
}

.product-card h5{
    font-weight:700;
}

.product-card p{
    min-height:60px;
    color:#666;
}

.product-card h4{
    font-weight:700;
    margin-bottom:15px;
}

/* ==========================
   BUTTONS
========================== */

.btn-primary{
    font-weight:600;
}

.btn-success{
    font-weight:600;
}

.btn-dark{
    font-weight:600;
}

.btn-warning{
    font-weight:600;
}

/* ==========================
   CTA SECTION
========================== */

.cta-section{
    background:#0d6efd;
    color:#fff;
    padding:80px 0;
}

.cta-section h2{
    font-size:42px;
    font-weight:700;
}

.cta-section p{
    font-size:18px;
    margin:20px 0;
}

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

.footer{
    background: linear-gradient(180deg,#0f1724 0%, #09121a 100%);
    color:#e6eef6;
    padding:60px 0 20px;
}

.footer h4{
    margin-bottom:20px;
}

.footer ul li{
    margin-bottom:10px;
}

.footer hr{
    border-color:rgba(230,238,246,0.08);
    margin:30px 0;
}

/* ==========================
   CARDS + TRANSITIONS
========================== */

.product-card{
    transition: transform .36s cubic-bezier(.2,.8,.2,1), box-shadow .36s ease;
    will-change: transform;
}
.product-card:hover{
    transform: translateY(-12px) scale(1.01);
    box-shadow:0 25px 50px rgba(2,6,23,0.18);
}

.hero-card{
    transition: transform .36s cubic-bezier(.2,.8,.2,1), box-shadow .36s ease;
}
.hero-card:hover{
    transform: translateY(-6px);
    box-shadow:0 18px 40px rgba(2,6,23,0.08);
}

/* subtle shine on card hover */
.product-card::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 100%);
    opacity: 0;
    transition: opacity .4s ease, transform .6s ease;
    transform: translateX(-30%);
    pointer-events: none;
}
.product-card:hover::after{ opacity:1; transform: translateX(30%); }

/* ==========================
   PRODUCT PAGE
========================== */

.product-details{
    padding:60px 0;
}

.product-main-image{
    width:100%;
    border-radius:15px;
}

.product-title{
    font-size:40px;
    font-weight:700;
}

.product-price{
    font-size:34px;
    color:var(--cta);
    font-weight:700;
    margin:20px 0;
}

.feature-list li{
    padding:8px 0;
    border-bottom:1px solid #eee;
}

.whatsapp-btn{
    background:#25D366;
    color:#fff;
}

.whatsapp-btn:hover{
    background:#22c35e;
    color:#fff;
}

/* ==========================
   ENQUIRY FORM
========================== */

.enquiry-box{
    background:#fff;
    border-radius:15px;
    padding:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

/* Ensure enquiry form controls and floating labels remain readable on light background */
.enquiry-box,
.enquiry-box .form-control,
.enquiry-box .form-floating label,
.enquiry-box .form-floating input,
.enquiry-box .form-floating textarea{
    color:#222 !important;
}
.enquiry-box p{ color:#222 !important; }
.contact-info p{ color:#222 !important; }
.contact-info a{ color:var(--primary-700) !important; }
.enquiry-box .form-floating label{ color:#495057 !important; }
.enquiry-box .form-control::placeholder{ color:#adb5bd !important; opacity:1 !important; }
.enquiry-box .form-control{
    background:#fff;
    border:1px solid #e6e6e6;
}
.enquiry-box .form-floating label{
    color:#6c757d;
}

/* Professional enquiry layout */
.enquiry-grid{ gap:24px; }
.contact-card{
    background: linear-gradient(180deg,var(--primary-600) 0%,var(--primary-700) 100%);
    color:#fff;
    border-radius:12px;
    padding:20px;
    height:100%;
}
.contact-card h5{ color:#ffd166; margin-bottom:12px; }
.contact-card p{ margin-bottom:10px; font-weight:600; }
.contact-card a{ color:inherit; text-decoration:none; }

.enquiry-box .form-floating .form-control{ height:56px; padding:1rem .75rem; border-radius:8px; }
.enquiry-box .form-floating textarea.form-control{ height:auto; padding:1rem .75rem; }
.enquiry-box .btn-primary{ background:var(--cta); border:none; border-radius:10px; padding:12px 18px; font-size:1.05rem; }

.form-control{
    padding:12px;
    border-radius:10px;
}

textarea.form-control{
    resize:none;
}

/* ==========================
   CONTACT PAGE
========================== */

.contact-section{
    padding:70px 0;
}

.contact-card{
    background:#fff;
    color:#222;
    border-radius:15px;
    padding:30px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}
.contact-card .form-floating label,
.contact-card .form-control,
.contact-card .contact-info p,
.contact-card .contact-info a{
    color:#222 !important;
}
.contact-card .form-control::placeholder{
    color:#6c757d !important;
}
.contact-card .form-floating .form-control {
    min-height: 48px;
    padding: 0.75rem 0.85rem;
}
.contact-card .form-floating textarea.form-control {
    min-height: 100px;
    height: 110px;
    padding-top: 0.85rem;
}
@media (max-width: 767px) {
    .contact-card {
        padding: 18px;
    }
    .contact-card .row.gy-3 > [class^="col"] {
        margin-bottom: 0.3rem;
    }
    .contact-card .btn-lg {
        width: 100%;
        padding: 0.8rem 1rem;
    }
}

.contact-icon{
    font-size:40px;
    color:#0d6efd;
    margin-bottom:15px;
}

/* ==========================
   THANK YOU PAGE
========================== */

.thankyou-section{
    min-height:70vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.thankyou-box{
    background:#fff;
    padding:50px;
    border-radius:20px;
    box-shadow:0 5px 30px rgba(0,0,0,.1);
}

.thankyou-box i{
    font-size:80px;
    color:green;
    margin-bottom:20px;
}

/* ==========================
   RESPONSIVE
========================== */

img{
    max-width:100%;
    height:auto;
    display:block;
}

p, a, li, span, button, h1, h2, h3, h4, h5{
    overflow-wrap:anywhere;
    word-break:break-word;
}

@media(max-width:991px){

.hero{
    height:450px;
}

.hero h1{
    font-size:40px;
}

.hero p{
    font-size:18px;
}

}

@media(max-width:768px){

.topbar{
    font-size:0.85rem;
    text-align:center;
}

.topbar .row > div{
    text-align:center !important;
}

.navbar-brand{
    font-size:20px;
}

.navbar-brand img{
    height:56px !important;
}

.hero{
    height:auto !important;
    min-height:320px;
    padding:60px 0 !important;
}

.hero h1{
    font-size:32px !important;
}

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

.hero-card{
    padding:24px !important;
}

.hero-card .d-flex{
    flex-direction:column !important;
    gap:12px !important;
}

.hero-card .btn{
    width:100% !important;
}

.product-img{
    height:220px;
}

.product-details{
    padding:40px 0 !important;
}

.product-details .btn{
    width:100% !important;
}

.cta-section h2{
    font-size:30px;
}

.enquiry-grid{
    gap:16px;
}

.contact-card,
.enquiry-box,
.thankyou-box{
    padding:20px !important;
}

.footer{
    text-align:center;
    padding:40px 0 20px;
}

.footer .col-md-4{
    margin-bottom:16px;
}

}

@media(max-width:576px){

.hero{
    min-height:280px;
    padding:40px 0 !important;
}

.hero h1{
    font-size:26px !important;
}

.hero p{
    font-size:14px !important;
}

.navbar-brand{
    font-size:20px;
}

.navbar-brand img,
.navbar-logo{
    width:44px;
    max-height:44px;
}

.product-img{
    height:190px;
}

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

.product-price{
    font-size:24px;
}

.contact-section{
    padding:40px 0;
}

}