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

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f8f9fa;
    color: #333;
}

/* Top Bar */
.top-bar {
    background-color: #004a99; /* Company Blue */
    color: white;
    padding: 10px 5%;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    align-items: center;
}

/* Navigation */
nav {
    background-color: white;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* --- New Logo Styles --- */

/* පින්තූරය සහ අකුරු එක පෙළට ගැනීම */
.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none; /* Link එකේ ඉර අයින් කිරීම */
    gap: 15px; /* පින්තූරය සහ අකුරු අතර පරතරය */
}

/* ලෝගෝ එක රවුම් කිරීම */
.circle-logo {
    height: 65px; /* උස */
    width: 65px;  /* පළල (උසට සමාන විය යුතුයි) */
    border-radius: 50%; /* මෙය තමයි රවුම් කරන කෝඩ් එක */
    object-fit: cover; /* පින්තූරය ඇදෙන්නේ නැතුව කොටුවට හරියන්න ගැනීම */
    border: 3px solid #2E8B57; /* වටේට ලස්සන කොළ පාට ඉරක් (Optional) */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* පොඩි සෙවනැල්ලක් */
    transition: transform 0.3s;
}

/* මවුස් එක තිබ්බම පොඩ්ඩක් ලොකු වෙන්න */
.logo-container:hover .circle-logo {
    transform: scale(1.08);
}

/* අකුරු වල ස්ටයිල් (කලින් තිබුණ එකමයි) */
.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #004a99;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: left;
}

.logo-text small {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: 400;
}

/* Phone වලදී පොඩ්ඩක් සයිස් අඩු කිරීම */
@media (max-width: 768px) {
    .circle-logo {
        height: 50px;
        width: 50px;
    }
    .logo-text {
        font-size: 16px;
    }
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #004a99;
    text-transform: uppercase;
    line-height: 1.2;
}

.logo-text small {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: 400;
}

.nav-links a {
    text-decoration: none;
    color: #555;
    margin-left: 20px;
    font-weight: 600;
    transition: 0.3s;
    font-size: 15px;
}

.nav-links a:hover { color: #2E8B57; }

.cta-btn {
    background-color: #d32f2f; /* Orange/Red */
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
}

/* Hero Section */
.hero {
    /* පසුබිමට ලස්සන Biogas හෝ Construction ෆොටෝ එකක් දාන්න */
    
    background-size: cover;
    background-position: center;
    height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 0 20px;
}

.hero h1 { font-size: 42px; margin-bottom: 20px; text-shadow: 2px 2px 4px black; }
.hero span { color: #4CAF50; } /* Green Highlight */

.nerdc-badge {
    background-color: #ffeb3b;
    color: #000;
    padding: 8px 25px;
    border-radius: 50px;
    font-weight: 700;
    margin-bottom: 25px;
    font-size: 14px;
    border: 2px solid #fff;
}

/* Service Card Animation */
.service-box {
    background: white;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: all 0.4s ease; /* Animation එකේ වේගය */
    position: relative;
    overflow: hidden;
}

/* Mouse එක උඩට ගියාම වෙන දේ */
.service-box:hover {
    transform: translateY(-10px); /* උඩට ඉස්සෙනවා */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* හෙවනැල්ල වැඩි වෙනවා */
    border-color: #2E8B57; /* Border එක කොළ පාට වෙනවා */
}

/* අයිකන් එකට වෙනම Animation එකක් */
.service-box i {
    transition: all 0.4s ease;
}

.service-box:hover i {
    transform: scale(1.1) rotate(5deg); /* අයිකන් එක ලොකු වෙලා පොඩ්ඩක් ඇල වෙනවා */
}

/* විශේෂ Biogas Box එකට (කොළ පාට එකට) */
.service-box.highlight {
    background: #e8f5e9;
    border-bottom: 5px solid #2E8B57;
}

.service-box.highlight:hover {
    background: #2E8B57; /* Hover කළාම සම්පූර්ණ Box එකම කොළ පාට වෙනවා */
    color: white;
}

/* Hover කළාම අකුරු සුදු පාට වෙන්න (Biogas එකේ විතරක්) */
.service-box.highlight:hover h3, 
.service-box.highlight:hover p,
.service-box.highlight:hover i {
    color: white !important;
}

/* Footer */
footer {
    background-color: #1a1a1a;
    color: #ccc;
    padding: 50px 5% 20px;
    margin-top: 50px;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}
.footer-col h3 { color: white; margin-bottom: 20px; }
.footer-bottom { border-top: 1px solid #333; padding-top: 20px; text-align: center; font-size: 14px; }


/* --- MOBILE BUTTON FIXES --- */
@media screen and (max-width: 600px) {
    
    /* 1. Button Width Control */
    .contact-btn, .btn, .hero-text a, button {
        width: 100% !important;       /* Button එක Screen එකේ ප්‍රමාණයට හදන්න */
        max-width: 90% !important;    /* තිරයෙන් 90% කට වඩා ලොකු වෙන්න එපා කියන එක */
        margin-left: auto !important; /* මැදට ගන්න */
        margin-right: auto !important;
        box-sizing: border-box !important; /* Padding නිසා ලොකු වීම නවත්වන්න */
        display: block;               /* පේළියක් විදිහට පෙන්වන්න */
    }

    /* 2. Font Size Adjustment */
    .contact-btn, .btn {
        font-size: 14px !important;   /* අකුරු ගොඩක් ලොකු නම් පොඩි කරන්න */
        padding: 12px 15px !important; /* Button එක ඇතුලේ ඉඩ (Padding) අඩු කරන්න */
        white-space: nowrap;          /* වචන පේළි දෙකකට කැඩෙන එක නවත්වන්න (කැමති නම් අයින් කරන්න) */
        text-overflow: ellipsis;      /* දිග වැඩි නම් අගට ... දාන්න */
        overflow: hidden;
    }

    /* 3. Container Padding fix */
    .container, section {
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden; /* හරහට Scroll වෙන එක නවත්වන්න */
    }
}