/* assets/css/style.css */

/* --- Global Resets --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Open Sans', sans-serif; color: #333; background-color: #fff; line-height: 1.6; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
input, button, textarea { font-family: inherit; }

/* --- Layout Utilities --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 15px; } /* 1100px matches screenshot width better */
.text-center { text-align: center; }

/* --- Buttons --- */
.read-more-btn, .btn-primary {
    display: inline-block;
    background-color: #005a9c;
    color: white;
    padding: 10px 25px;
    font-size: 13px;
    border-radius: 4px;
    margin-top: auto;
    border: none;
    cursor: pointer;
    font-weight: 600;
}
.read-more-btn:hover, .btn-primary:hover { background-color: #004070; }
.btn-white { 
    background: white; color: #005a9c; padding: 10px 25px; border-radius: 4px; font-weight: 600; display: inline-block; 
}
.btn-white:hover { background-color: #f0f0f0; }

/* --- Header Section --- */
header { padding: 20px 0 0 0; background: #fff; }
.header-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; }

/* Logo Simulation */
.logo-main, .logo {
    font-size: 32px; font-weight: 700;
    /* Exact gradient match */
    background: -webkit-linear-gradient(#add8e6, #005a9c);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
    font-family: Arial, sans-serif; letter-spacing: 1px;
}
.logo-main span, .logo span { 
    display: block; font-size: 12px; letter-spacing: 4px; 
    color: #005a9c; -webkit-text-fill-color: #005a9c; 
    text-align: right; margin-top: -5px; 
}

/* Header Right Info */
.header-info { text-align: right; font-size: 14px; color: #666; }
.call-info { font-size: 18px; margin-bottom: 5px; }
.call-info span { color: #005a9c; font-weight: 600; font-size: 22px; }
.email-info { margin-bottom: 8px; }

/* Search Box */
.search-box { display: flex; justify-content: flex-end; }
.search-box input { padding: 5px 10px; border: 1px solid #ccc; border-radius: 3px 0 0 3px; font-size: 13px; width: 150px; }
.search-box button { padding: 5px 10px; background-color: #e0e0e0; border: 1px solid #ccc; border-left: none; cursor: pointer; font-size: 12px; border-radius: 0 3px 3px 0; }

/* --- Navigation --- */
.navbar { margin-top: 10px; border-top: 1px solid #eee; position: relative; }
.nav-list { display: flex; justify-content: flex-end; gap: 2px; }
.nav-item a { 
    display: block; padding: 10px 15px; font-size: 13px; 
    font-weight: 600; color: #555; text-transform: uppercase; 
}
.nav-item a:hover { color: #005a9c; }
.nav-item a.active { background-color: #005a9c; color: white; }

/* Mobile Menu Icon */
.menu-toggle { display: none; font-size: 24px; cursor: pointer; color: #005a9c; position: absolute; top: -50px; left: 0; }

/* --- Heroes --- */
.hero, .about-hero, .news-hero, .case-hero, .hero-testimonials {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero { height: 450px; }
.about-hero { height: 350px; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.about-hero h1 { font-size: 48px; font-weight: 800; text-transform: uppercase; }
.news-hero, .case-hero { background-color: #005a9c; padding: 40px 0; color: white; text-align: center; overflow: hidden; position: relative; }
.news-hero h1, .case-hero h1 { font-size: 36px; font-weight: 700; }
.hero-testimonials { height: 350px; }

/* --- General Content Styles --- */
.intro-section { padding: 40px 20px; background: #fff; }
.intro-content h1 { color: #444; font-size: 28px; margin-bottom: 20px; font-weight: 700; }
.intro-content p { color: #666; font-size: 15px; max-width: 900px; margin: 0 auto; line-height: 1.6; }
.intro-bold { font-weight: 700; color: #333; display: block; margin-top: 15px; }

/* --- Grids --- */
.feature-section { background-color: #f7f7f7; padding: 50px 0; }
.feature-grid { display: flex; gap: 40px; align-items: center; }
.feature-text h2 { color: #444; font-size: 24px; margin-bottom: 20px; }

.news-section, .case-section { padding: 60px 0; }
.news-grid, .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.products-section { padding: 60px 0; }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; text-align: center; }

/* Cards */
.news-card, .case-card, .product-card { background: #fff; display: flex; flex-direction: column; }
.news-img, .case-img { width: 100%; height: 250px; object-fit: cover; margin-bottom: 20px; background-color: #f0f0f0; }
.news-title, .case-title { font-size: 18px; color: #333; font-weight: 700; margin-bottom: 15px; line-height: 1.4; }
.news-excerpt, .case-desc { font-size: 14px; color: #666; margin-bottom: 20px; line-height: 1.6; }

.product-img-box { height: 180px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.product-img-box img { max-height: 100%; max-width: 100%; object-fit: contain; }
.product-title { font-size: 13px; color: #005a9c; text-transform: uppercase; line-height: 1.4; font-weight: 600; }

/* --- Blue Section (Home) --- */
.blue-section { background-color: #005a9c; color: white; padding: 50px 0; }
.blue-grid { display: flex; gap: 50px; }
.col-half { flex: 1; }
.blue-heading { font-size: 20px; font-weight: 700; margin-bottom: 30px; text-align: center; }
.review-card { background: white; color: #333; padding: 30px; border-radius: 5px; position: relative; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.stars { color: #f4b400; margin: 10px 0; }
.card-arrow { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); color: white; font-size: 24px; cursor: pointer; }

/* --- Testimonials Page --- */
.testimonials-row-1 { display: flex; gap: 30px; margin-bottom: 30px; }
.testimonial-card { background: #fff; border: 1px solid #eee; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 40px; flex: 1; border-radius: 5px; }
.quote-text { color: #005a9c; font-size: 24px; line-height: 1.3; margin-bottom: 30px; }
.quote-author { font-weight: 700; color: #666; font-size: 14px; }

/* --- Contact Page --- */
.contact-grid { display: flex; gap: 50px; padding-bottom: 80px; }
.contact-info-col, .enquiries-col { flex: 1; }
.enquiry-input, .enquiry-textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 3px; margin-bottom: 15px; display: block; }
.btn-enquiry-send { background-color: #e0e0e0; border: 1px solid #ccc; color: #333; padding: 6px 15px; cursor: pointer; }

/* --- Request Form (Blue Bar) --- */
.request-section { background-color: #005a9c; padding: 50px 0; color: white; position: relative; overflow: hidden; }
.form-box { width: 100%; max-width: 700px; text-align: center; margin: 0 auto; position: relative; z-index: 2; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-input { width: 100%; padding: 12px 15px; border-radius: 4px; border: none; outline: none; }
.bg-graphic { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); font-size: 180px; color: rgba(255,255,255,0.1); z-index: 1; }

/* --- Footer --- */
.main-footer { background-color: #444; color: #ccc; padding: 40px 0; text-align: center; font-size: 14px; }
.footer-heading { color: #bbb; font-size: 18px; margin-bottom: 15px; }
.footer-links { margin-bottom: 20px; }
.footer-links a { color: #ccc; margin: 0 8px; text-decoration: underline; font-size: 13px; }
.sub-footer { background-color: #222; padding: 20px 0; text-align: center; }
.group-logo-footer { border: 2px solid #555; padding: 5px 15px; display: inline-block; color: #888; font-weight: 700; font-size: 20px; margin-top: 5px; }

/* --- RESPONSIVE MEDIA QUERIES --- */

@media (max-width: 992px) {
    .products-grid, .news-grid, .case-grid { grid-template-columns: repeat(2, 1fr); }
    .bg-graphic, .card-arrow { display: none; }
}

@media (max-width: 768px) {
    .header-top { flex-direction: column; text-align: center; gap: 20px; }
    .logo-main span, .logo span { text-align: center; }
    .header-info { text-align: center; }
    .search-box { justify-content: center; }

    .menu-toggle { display: block; top: 20px; left: 20px; }
    header .container { position: relative; }

    .nav-list { display: none; flex-direction: column; width: 100%; background: #f9f9f9; text-align: center; padding: 20px 0; }
    .nav-list.active { display: flex; }

    .products-grid, .news-grid, .case-grid { grid-template-columns: 1fr; }
    .contact-grid, .feature-grid, .blue-grid, .testimonials-row-1 { flex-direction: column; }
    .form-grid { grid-template-columns: 1fr; }
    .logos-row { flex-direction: column; gap: 30px; }

    .nav-list {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -300px; /* Hidden off-screen initially */
        width: 260px;
        height: 100vh;
        background-color: #1a1a1a; /* Dark background matching screenshot */
        padding-top: 60px;
        padding-left: 0;
        align-items: flex-start; /* Align text to left */
        transition: left 0.3s ease-in-out;
        z-index: 9999;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    }

    /* Active State (Slide In) */
    .nav-list.active {
        left: 0;
    }

    /* Links Styling */
    .nav-item {
        width: 100%;
    }

    .nav-item a {
        display: block;
        color: #fff; /* White text */
        font-size: 16px;
        padding: 15px 25px;
        text-transform: none; /* Mixed case like screenshot */
        border-bottom: 1px solid #333; /* Subtle separator */
        font-weight: 400;
    }

    .nav-item a:hover {
        background-color: #333;
        color: #fff;
    }

    .nav-item a.active {
        background-color: #005a9c; /* Blue highlight for active page */
        color: white;
    }

    /* Blue Close Button (X) */
    .menu-close {
        position: absolute;
        top: 20px;
        right: -50px; /* Positions the button outside the sidebar */
        width: 40px;
        height: 40px;
        background-color: #005a9c; /* Unitech Blue */
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        border-radius: 0 4px 4px 0;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    }
}