/* Basic Reset */
    * {margin: 0;padding: 0;box-sizing: border-box;}
    /* Dark Mode - Neo Brutalism Theme */
    body {background-color: #121212;color: #e1e1e1;font-family: 'Arial', sans-serif;line-height: 1.6;margin-top: 60px;}
    /* h1, h2, h3, p {margin-bottom: 20px;} */
    a {text-decoration: none;color: inherit;}
    /*  Amber Navbar*/
    .navbar {position: fixed;top: 0;left: 0;width: 100%;background-color: #3e3b3b;border-bottom: 3px solid #ff9800;padding: 5px 10px;display: flex;justify-content: space-between;align-items: center;z-index: 1000;} 
    /* Black NavBar
    .navbar {position: fixed;top: 0;left: 0;width: 100%;background-color: #222;border-bottom: 3px solid #eaec5b;padding: 5px 10px;display: flex;justify-content: space-between;align-items: center;z-index: 1000;} */
    /*  Blue Navbar 
    .navbar {position: fixed;top: 0;left: 0;width: 100%;background-color: #14142f;border-bottom: 3px solid #0077ff;padding: 5px 10px;display: flex;justify-content: space-between;align-items: center;z-index: 1000;}
    /*  Teal Navbar
    .navbar {position: fixed;top: 0;left: 0;width: 100%;background-color: #102f32;border-bottom: 3px solid #00bfa5;padding: 5px 10px;display: flex;justify-content: space-between;align-items: center;z-index: 1000;}
    /* NavBar Contents */
    .navbar img {max-height: 50px;width: auto;object-fit: contain;}
    .nav-icons {display: flex; gap: 15px;}
    .nav-icons img {width: 30px;height: 30px;transition: transform 0.3s ease, filter 0.3s ease;filter: brightness(0.8); cursor: pointer;}
    .nav-icons img:hover {transform: scale(1.2);filter: brightness(1.2);}
    /* NavBar Login/SignUp Border Styling */
    .nav-icon.border-red { border: 2px solid red;border-radius: 4px;}
    .nav-icon.border-green {border: 2px solid green;border-radius: 4px;}
    /* Banner */
    .banner-container {position: relative; width: 100%; margin-top: 65px; /*  to avoid overlap with navbar */}
    .banner-overlay { position: absolute; color: white; background: rgba(0, 0, 0, 0.5); padding: 0px; border-radius: 8px;}
    .banner-img {width: 100%; height: auto; display: block; }
    .overlay-img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; max-width: 15%; object-fit: cover; z-index: 1;}
    .bottom {bottom: 0; position: absolute; margin-left: 30px; margin-right: 30px; justify-content: center;} 
    /* Content on top of the banner */
    .banner-content {position: absolute; top: 0px; left: 0; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 10px; color: white; text-align: center; /* margin-top: 30px;  to avoid overlap with navbar */  /* background: rgba(0, 0, 0, 0.3); optional dark overlay */ }
    .box-row { display: flex; flex-wrap: wrap; gap: 10px; position: relative; top: 0px;justify-content: center; margin-bottom: 10px; }
    .info-box { background-color: rgba(255, 255, 255, 0.95); color: #008080; line-height: normal; padding: 5px; min-width: 100px; max-width: 200px; flex: 1 1 20%; text-align: center; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
    .banner-headline { font-size: 1.8rem; font-weight: bold; margin-top: 10px; color: #ffffff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
    /* Image wrap-styling Left/Right */
    .img-left {float: left; margin: 5px; max-width: 150px; height: auto;}
    .img-right {float: right; margin: 5px; max-width: 150px; height: auto;}
    /* Main content - F Layout */
    .main-content {width: 100%;flex: 1;padding: 30px 20px;display: grid; grid-template-columns: 3fr 1fr; grid-gap: 20px;margin-bottom: 40px; /* Ensuring space between content and footer */}
    .left-column {display: flex;flex-direction: column;gap: 10px;}
    .right-column {display: flex;flex-direction: column;gap: 10px;}
    .headline {grid-column: span 2;font-size: 2rem;font-weight: bold; margin-bottom: 2px;border-bottom: 4px solid #0077ff;padding-bottom: 10px;}
    /* Amber Cards */
    .headline {grid-column: span 2;font-size: 2rem;font-weight: bold;margin-bottom: 20px;border-bottom: 4px solid #ff9800;padding-bottom: 10px;}
    .card {background-color: #4a4a4a;padding: 20px;transition: background 0.3s ease;}
    .card-border-left {background-color: #4a4a4a;border-left: 6px solid #ff9800;padding: 20px;transition: background 0.3s ease;}
    .card:hover {background-color: #6b6b6b;}
    .card-border-left:hover {background-color: #6b6b6b;}
    .card p {font-size: 0.95rem;line-height: 1.5;color: #ffcc80;}
    .card h3 {margin-bottom: 10px;color: #ff9800;}
    /* Black Cards
    .card {background-color: #050e18;padding: 20px; transition: background 0.3s ease;}
    .card:hover {background-color: #929ba5;}
    .card-border-left {background-color: #102f32;border-left: 6px solid #0077ff;padding: 20px;transition: background 0.3s ease;}
    .card-border-left:hover{background-color: #145c5a;transform: scale(1.02);box-shadow: 0 4px px rgba(0, 0, 0, 0.6);}
    .card-border-right {background-color: #102f32;border-right: 6px solid #0077ff;padding: 20px;transition: background 0.3s ease;}
    .card-border-right:hover{background-color: #145c5a;transform: scale(1.02);box-shadow: 0 4px px rgba(0, 0, 0, 0.6);}
    .card-border-left p {font-size: 0.95rem;line-height: 1.5;color: #b2dfdb;}
    .card-border-right p {font-size: 0.95rem;line-height: 1.5;color: #b2dfdb;}
    .card p {font-size: 0.95rem;line-height: 1.5;color: #e1e1e1;}
    .card h3 {margin-bottom: 10px;color:  #e1e1e1;} */
    /* Blue Cards
    .card {background-color: #101e32;padding: 20px; transition: background 0.3s ease;}
    .card:hover {background-color: #14365c;}
    .card-border-left {background-color: #102f32;border-left: 6px solid #0077ff;padding: 20px;transition: background 0.3s ease;}
    .card-border-left:hover{background-color: #145c5a;transform: scale(1.02);box-shadow: 0 4px px rgba(0, 0, 0, 0.6);}
    .card-border-right {background-color: #102f32;border-right: 6px solid #0077ff;padding: 20px;transition: background 0.3s ease;}
    .card-border-right:hover{background-color: #145c5a;transform: scale(1.02);box-shadow: 0 4px px rgba(0, 0, 0, 0.6);}
    .card-border-left p {font-size: 0.95rem;line-height: 1.5;color: #b2dfdb;}
    .card-border-right p {font-size: 0.95rem;line-height: 1.5;color: #b2dfdb;}
    .card h3 {margin-bottom: 10px;color: #0077ff;}
    .card p {font-size: 0.95rem;line-height: 1.5;color: #b2dfdb;} */
    /* Teal Cards
    .headline {grid-column: span 2;font-size: 2rem;font-weight: bold;margin-bottom: 20px;border-bottom: 4px solid #00bfa5; padding-bottom: 10px;}
    .card {background-color: #103436;border-left: 6px solid #00bfa5;padding: 20px;transition: background 0.3s ease;}
    .card:hover {background-color: #145c5a;}
    .card h3 {margin-bottom: 10px;color: #1de9b6;}
    .card p {font-size: 0.95rem;line-height: 1.5;color: #b2dfdb;} */
    /* Black Footer
    .footer {background-color: #222; color: #e1e1e1; border-top: 3px solid #eaec5b; text-align: center; padding: 10px 0; margin-top: 40px; z-index: 1000; font-size: 0.9rem;}
    .footer a {color: #ffffff; text-decoration: none; margin: 0 10px; transition: color 0.3s ease;} */
    /* Amber Footer */
    .footer {background-color: #3e3b3b; color: #e1e1e1; border-top: 3px solid #ff9800;text-align: center;padding: 10px; margin-top: 40px; z-index: 1000; font-size: 0.9rem;}
    .footer a {color: #ffb74d; text-decoration: none; margin: 0 10px;}
    /* Blue Footer
    .footer {background-color: #1c1c3b; color: #e1e1e1; border-top: 3px solid #0077ff;text-align: center;padding: 10px; margin-top: 40px; z-index: 1000; font-size: 0.9rem;}
    .footer a {color: #61dafb; text-decoration: none; margin: 0 10px;}
    /* Teal Footer
    .footer {background-color:#103436; #103436;border-top: 3px solid #00bfa5;text-align: center;padding: 20px;font-size: 0.9rem;}
    .footer a {color: #1de9b6; text-decoration: none; margin: 0 10px;} */
    .footer a:hover {text-decoration: underline; color: #fffb22;}
    /* ✔ Checkmark list — for benefit lists */
    ul.checklist li::before { content: '✔'; color: #005baf; font-weight: bold; margin-right: 10px;}
    /* 📌 Pin list — for performance or KPI lists */
    ul.metric-list li::before { content: '📌'; color: #005baf; margin-right: 10px;}
    /* 🛠️ Tool list — for service or operational topics */
    ul.service-list li::before { content: '🛠️'; margin-right: 10px;}
    ul {list-style: none; padding: 0;}
    ul li { margin: 10px 0;padding-left: 30px;position: relative;}
    ul li::before {content: '✅';position: absolute;left: 0;color: #007BFF;font-size: 1.2em;}
    /* Button Styling */
    .cta-btn {background-color: #f79102;color: #fff; padding: 5px 20px;border: none;font-size: 1.2em;cursor: pointer;border-radius: 5px;transition: background-color 0.3s;margin-top: 20px; /*width: fit-content; */}
    .cta-btn:hover {background-color: #d43f34;}
    /* Thumbnail Container to wrap the image and the overlay message */
    .thumbnail-container {position: relative;max-width: 100%; height: auto;}
    .media-thumbnail {width: 100%;height: 100%;cursor: pointer;}
    /* Default message style when JS is disabled, it appears over the image */
    .no-js-message {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255, 0, 0, 0.7);color: white;display: flex;justify-content: center;align-items: center;font-size: 10px;font-weight: bold;z-index: 10;display: block; /* Visible by default */}
    /* When JS is enabled, hide the message */
    .js-enabled .no-js-message {display: none;}
    /* Span classes */
    .white-on-black {background: rgba(0, 0, 0, 0.5); padding: 6px 10px; border-radius: 8px; color:white!important;}
    /* Article / Blog Post / Comment Area */
    .post {background-color: #1e1e1e;border-radius: 10px;padding: 20px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);}
    .post h1 {font-size: 2.5rem;}
    .post p {font-size: 1.2rem;margin-bottom: 20px;}
    .comments-section {background-color: #222;padding: 20px;border-radius: 10px;margin-top: 10px;}
    .comments-section h2 {margin-top: 20px;}
    .comment-box {background-color: #333;padding: 15px;border-radius: 10px;margin-bottom: 20px;}
    .comment-box .user-info {display: flex;align-items: center;gap: 10px;}
    .comment-box .user-info .name-box {background-color: #f1a51d;color: #121212;padding: 8px;border-radius: 50%;font-weight: bold;}
    .comment-box .user-info .user-name {color: #f1a51d;}
    .comment-box .comment-time {color: #999;font-size: 0.9rem;}
    .comment-box p {font-size: 1rem;}
    .comment-form {display: flex;flex-direction: column;gap: 15px;}
    .comment-form input, .comment-form textarea {background-color: #444;border: 1px solid #555;color: #fff;padding: 10px;border-radius: 5px;font-size: 1rem;}
    .comment-form button {background-color: #f1a51d;color: #121212;padding: 10px 20px;border: none;border-radius: 5px;font-size: 1.1rem;cursor: pointer;transition: background-color 0.3s ease;}
    .comment-form button:disabled {background-color: #555;cursor: not-allowed;}
    .comment-form button:hover {background-color: #d88d1c;}
    .captcha-container {display: flex;align-items: center;gap: 10px;}
    .captcha {background-color: #444;color: #f1a51d;font-size: 1.5rem;text-align: center;padding: 10px;border-radius: 5px;width: 150px;}
    .captcha input {padding: 8px;font-size: 1rem;border-radius: 5px;width: 140px;}
    .captcha button {background-color: #f1a51d;color: #121212;border: none;padding: 5px 10px;font-size: 1rem;border-radius: 5px;cursor: pointer;}
    .captcha button:hover {background-color: #d88d1c;}
    .error-message {color: red;font-size: 1rem;margin-top: 10px;}
    /* Cookie Pop-up Left */
    .cookie-wrapper {position: fixed;bottom: 50px;left: -370px;max-width: 345px;width: 100%;border-radius: 8px;padding: 15px 25px 22px;transition: left 0.3s ease;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);}
    .cookie-wrapper.show {left: 20px;}
    /* Cookie Pop-up Right
    .cookie-wrapper {position: fixed;bottom: 50px;right: -370px;max-width: 345px;width: 100%;background: #f5e8b3;border-radius: 8px;padding: 15px 25px 22px;transition: right 0.3s ease;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);}
    .cookie-wrapper.show {right: 20px;} */
    .cookie-wrapper head {display: flex;align-items: center;column-gap: 15px;}
    .cookie-box p a {color: #ecf011;text-decoration: none;}
    .cookie-box p a:hover {text-decoration: underline;}
    .cookie-wrapper .cookie-buttons {margin-top: 16px;width: 100%;display: flex;align-items: center;justify-content: space-between;}
    .cookie-buttons .button {border: none;color: #fff;padding: 8px 0;border-radius: 4px;cursor: pointer;width: calc(100% / 2 - 10px);transition: all 0.2s ease; }
    #acceptBtn {border: 2px solid green; }
    #declineBtn:hover {background-color: #ff5722;}
    /* Amber Cookie */
    .cookie-wrapper {background: #b6a357;}
    .button {background: #ff9800;}
    #acceptBtn:hover {background-color: #e4cf10d3;}
    /* Black Cookie
    .cookie-wrapper {background: #b6a357;}
    .button {background: #ff9800;}
    #acceptBtn:hover {background-color: #e4cf10d3;} */
    /* Blue Cookie
    .cookie-wrapper {background: #4a5ae3;}
    .button {background: #4080de;}
    #acceptBtn:hover {background-color: #075bec;} */
    /* Teal Cookie
    .cookie-wrapper {background: #37ad6c;}
    .button {background: #40ded1;}
    #acceptBtn:hover {background-color: #63ec07;} */

    /* Responsive Styles */
    @media (max-width: 768px) {
        .banner-container {width:100%; align-items: center; }
        .main-content {grid-template-columns: 1fr;padding: 10px;}
        .headline {grid-column: span 1;}
        .post h1 {font-size: 2rem;}
        .comment-form input, .comment-form textarea {font-size: 0.9rem;}
    	.content-image {float: none; margin: 20px 0;}}
    @media (max-width: 480px) {
        .navbar {flex-direction: column; align-items: center; gap: 10px;}
        .banner-container .banner-img {width:100%; align-items: center; }
       .main-content {padding: 10px;}
        .main-content {grid-template-columns: 1fr;}.headline {grid-column: span 1;}
        .post h1 {font-size: 2rem;}
        .comment-form input, .comment-form textarea {font-size: 0.9rem;}}