/* =================================================================== GLOBAL STYLES =================================================================== */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Montserrat', Arial, Helvetica, sans-serif;
     color: white;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background-color: #000000;
     min-height: 100vh;
     overflow-x: hidden;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

html.scroll-locked,
body.scroll-locked {
    overflow: hidden;
}

/* ================= CHAT WIDGET STYLES ================= */
#chat-widget-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999;
    background: #0052bd;
    color: white;
    border: 2px solid #0052bd;
    padding: 15px 25px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 82, 189, 0.4);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

#chat-widget-btn:hover {
    background: transparent;
    color: #006eff;
    box-shadow: 0 0 20px rgba(0, 110, 255, 0.6);
    transform: translateY(-3px);
}

#chat-box {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 350px;
    height: 500px;
    background-color: rgba(51, 55, 61, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    z-index: 99999;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#chat-header {
    background: linear-gradient(90deg, #0052bd, #003d8c);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#chat-header h4 { margin: 0; font-size: 16px; color: white; }
#close-chat { background: none; border: none; color: white; font-size: 20px; cursor: pointer; }

#chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#chat-messages::-webkit-scrollbar { width: 6px; }
#chat-messages::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }

/* GLOBAL MESSAGE STYLE */
.msg {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.3; 
    word-wrap: break-word;
}

/* TYPING BUBBLE OVERRIDE (Fixes the stretched box) */
#chat-messages .msg:has(.typing-indicator) {
    padding: 12px 18px;
    width: fit-content;
    min-width: unset;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg.user {
    background: #0052bd;
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.msg.ai {
    background: rgba(255,255,255,0.1);
    color: #e0e0e0;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    border: 1px solid rgba(255,255,255,0.05);
}

#chat-input-area {
    padding: 15px;
    background: rgba(0,0,0,0.2);
    display: flex;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

#chat-input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    padding: 10px;
    border-radius: 20px;
    outline: none;
    font-family: 'Montserrat', sans-serif;
}

#chat-input:focus { border-color: #0052bd; }

#send-btn {
    background: #0052bd;
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

#send-btn:hover { background: #006eff; transform: scale(1.1); }

/* DOT ANIMATION CONTAINER */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}

/* DOTS */
.typing-dot {
    display: block;
    width: 6px;
    height: 6px;
    background-color: #aaa;
    border-radius: 50%;
    animation: typingBounce 1.2s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1.1); opacity: 1; background-color: #fff; }
}


/* --- MOBILE OPTIMIZATIONS (FIXED & CENTERED) --- */
@media (max-width: 768px) {

    /* 1. Make the Button a Circle using Absolute Positioning */
    #chat-widget-btn {
        width: 60px;       /* Fixed width */
        height: 60px;      /* Fixed height */
        border-radius: 50%; /* Perfect circle */
        padding: 0;        /* Reset padding */
        
        /* Switch from Flex to Block to control coordinates manually */
        display: block;    
        
        font-size: 0;      /* Hide the text "Chat with AI" */
    }

    /* 2. Nuclear Center for the Icon */
    #chat-widget-btn i, 
    #chat-widget-btn svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Moves it back by half its own size */
        
        font-size: 24px;   
        margin: 0;         
        line-height: 0;    
        display: block;
    }

    /* 3. Make Chat Window Fullscreen */
    #chat-box {
        width: 100% !important;
        height: 100% !important;
        bottom: 0 !important;
        right: 0 !important;
        border-radius: 0 !important; 
        position: fixed;   
        z-index: 9999;     
    }
}


.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000; /* Pure Black to match body */
    z-index: 999999; /* Ensures it sits on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Smooth fade out transition */
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.welcome-text {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem); /* Responsive size */
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 5px;
    display: flex; /* Keeps letters aligned when JS splits them */
}

.welcome-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px); /* Start slightly down */
    
    /* Elegant rise-up animation */
    animation: manaloReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    
    /* Uses the variable set in your main.js for the wave effect */
    animation-delay: var(--wave-delay); 
}

@keyframes manaloReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        /* Your Manalo Blue Glow */
        text-shadow: 0 0 20px rgba(0, 110, 255, 0.6); 
    }
}

/* Class added by main.js to hide the loader */
.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Allows user to click things underneath */
}

/* ================= COOKIE BANNER STYLES ================= */
.cookie-banner {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 100%;
    max-width: 400px;
    background-color: #33373dbd; /* Your theme's glassy grey */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px;
    z-index: 10000; /* Ensures it is above everything else */
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    display: none; /* Hidden by default, JS will show it */
    animation: slideUp 0.5s ease-out forwards;
}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.cookie-content h4 {
    color: #ffffff;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.cookie-content p {
    color: #d1d5db;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.cookie-content a {
    color: #006eff; /* Manalo Blue */
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 15px;
}

.btn-cookie {
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1; /* Makes buttons equal width */
}

/* Accept Button (Blue) */
.btn-cookie.accept {
    background-color: #0052bd;
    color: white;
}
.btn-cookie.accept:hover {
    background-color: #007bff;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
}

/* Decline Button (Transparent/Outline) */
.btn-cookie.decline {
    background-color: transparent;
    border: 1px solid #666;
    color: #ccc;
}
.btn-cookie.decline:hover {
    border-color: #ffffff;
    color: #ffffff;
    background-color: rgba(255,255,255,0.05);
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .cookie-banner {
        bottom: 0;
        right: 0;
        max-width: 100%;
        border-radius: 15px 15px 0 0; /* Only round top corners */
    }
}

/* --- Flashlight Effect Overlay --- */
.flashlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to go through to elements underneath */
    z-index: 9999; /* Ensures it's on top of everything */
    background: radial-gradient(
        circle 100px at var(--cursor-x) var(--cursor-y),
        rgba(255, 255, 255, 0.15), /* A brighter, larger center for the light */
        transparent 80% /* Smooth fade to transparent so the content is visible */
    );
}

.navbar {
    width: 100%;
    margin: 0;
    padding: 35px 7.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    z-index: 9999 !important;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease, padding 0.25s ease;
}

.navbar-scrolled { position: fixed; /* Becomes fixed to the top of the screen */
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 7.5%; /* Adjust padding for fixed layout */

    /* Your frosted glass background */
    background: rgba(12, 12, 12, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* This is your original animation code, which is correct */
@keyframes fadeInSlideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

 .logo-img {
     width: 106px;
}
 #hamburger-btn {
     display: none;
}
 .navbar ul {
     list-style: none;
}
 .navbar ul li {
     display: inline-block;
     margin: 0 15px;
}
 .navbar ul li a {
     color: #ffffff;
     text-decoration: none;
     font-size: 18px;
     font-weight: 600;
     transition: color 0.3s ease;
}
 .navbar ul li a:hover, .navbar ul li a.active {
     color: #006eff;
}

.btn-header2.nav-button {
    /* Make it an outline */
    background-color: #0052bd;
    color: #ffffff; /* White text pops better *
    /* Fix the shape */
    padding: 0.6rem 1.5rem; 
    border-radius: 10px; 
    font-weight: 600;
    text-decoration: none;
    transition: all 0.4s ease;
    border: #0052bd7a 2px solid;
}

.btn-header2.nav-button:hover {
    background-color: #007bff; /* Brighter blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4); /* Blue glow */
}


 .manalo-animated {
     display: inline-block;
     animation: breathing 3s ease-in-out infinite;
}
 @keyframes breathing {
     0%, 100% {
         transform: scale(1);
    }
     50% {
         transform: scale(1.05);
    }
}
/* Style for the new typing animation text */
#auto-type {
    color: #006eff;
    display: inline;
    white-space: nowrap;
    position: relative;
}
#auto-type::after {
    content: '|';
    color: #ffffff;
    display: inline-block;
    margin-left: 0.1ch;
    animation: blinkCaret 1s steps(1,end) infinite;
}

@keyframes blinkCaret {
  50% { opacity: 0; }
}
.typed-cursor { display: none !important; }

/* --- Credit Section --- */
.credit {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 20px;
     background-color: #0c0c0c;
     flex-direction: column;
     gap: 3rem;
}

.credit h2{
    color: white;
    font-size: 2rem;
    line-height: 2;
}

.partners{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.partners a{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
}

.partners a:hover{
    text-decoration: underline;
}

 .skn {
     width: 150px;
     transition: transform 0.3s ease;
}
 .skn:hover {
     transform: scale(1.05);
}
/* --- Buttons --- */
 .button-header {
     display: flex;
     justify-content: center;
     margin-top: 50px;
     gap: 50px;
}
 .btn-header1, .btn-header2 {
     font-weight: 600;
     font-size: 16px;
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 2px solid #0052bd;
     border-radius: 25px;
     padding: 0.9rem 2.4rem;
     background: transparent;
     color: #fff;
     transition: color 0.3s ease, border 0.3s ease;
     text-decoration: none;
     isolation: isolate;
}
 .btn-header1 span, .btn-header2 span {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 0;
     background: #0052bd;
     border-radius: 25px;
     transition: width 0.5s ease;
     z-index: -1;
}
 .btn-header1:hover, .btn-header2:hover {
     color: #ffffff;
     border-color: transparent;
}
 .btn-header1:hover span, .btn-header2:hover span {
     width: 100%;
}
 .btn-header3 {
     font-weight: 600;
     width: 180px;
     font-size: 16px;
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 2px solid #0052bd;
     border-radius: 25px;
     padding: 15px 0px;
     background: transparent;
     color: #fff;
     transition: color 0.3s ease, border 0.3s ease;
     text-decoration: none;
     z-index: 1;
}
 .btn-header3 span {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 0;
     background: #0052bd;
     border-radius: 25px;
     transition: width 0.5s ease;
     z-index: -1;
}
 .btn-header3:hover {
     color: #fff;
     border-color: transparent;
}
 .btn-header3:hover span {
     width: 100%;
}

/* --- PROFESSIONAL FOOTER STYLES --- */
.footer-section {
    background-color: #0c0c0c; 
    color: #ffffff;
    padding: 60px 20px 20px; 
    border-top: 1px solid #222;
    width: 100%;
    box-sizing: border-box;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr; 
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h3 {
    font-size: 18px;
    font-weight: 600;
    color: #0052bd; 
    margin-bottom: 20px;
}

.footer-image-logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 15px;
}

.footer-desc {
    color: #ccc;
    font-style: italic;
    font-size: 14px;
    padding-right: 40px;
}

.footer-col p {
    margin-left: 35px;
}



/* --- New Social Media Styles --- */
.social-links {
    margin-top: 20px;
    margin-left: -4rem;
    padding-left: 0.1rem;
    display: flex;
    gap: 10px; /* Space between icons */
}

@media screen and (max-width: 1200px) {
    .footer-section {
        padding: 60px 50px 30px !important;
    }

    /* 1. Reset the container to stack items neatly */
    .footer-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Aligns everything to the left edge */
    }

    /* 2. Remove the 35px margin pushing "We win" to the right */
    .footer-col p {
        margin-left: 0 !important;
        padding-right: 0 !important;
        text-align: left;
    }

    /* 3. Remove the negative margin pulling icons to the left */
    .social-links {
        margin-left: 0 !important;
        justify-content: flex-start; /* Ensures icons start from the left */
    }
}

@media (max-width: 900px) {
    .social-links {
        margin-left: 0; /* Center on small screens */
        justify-content: center;
    }
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.08); /* Faint circle background */
    color: #ccc; /* Grey icons */
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
}

.social-links a:hover {
    background-color: #006eff; /* Brand Blue on hover */
    color: #ffffff;
    transform: translateY(-3px);
}
/* ------------------------------- */

.footer-links, .footer-contact {
    list-style: none;
    padding: 0;
}

.footer-links li, .footer-contact li {
    margin-bottom: 12px;
    font-size: 14px;
    color: #ccc;
}

.footer-links a, .footer-contact a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover, .footer-contact a:hover {
    color: #006eff; 
    padding-left: 5px;
}

.footer-contact span {
    font-weight: 600;
    color: #fff;
    margin-right: 5px;
}

.footer-bottom {
    border-top: 1px solid #222;
    padding-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #777;
}
/* ============ HOME PAGE STYLES =================================================================== */
 .banner {
     background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('Photos/banner.jpeg');
     min-height: 100vh;
     width: 100%;
     position: relative;
     background-size: cover;
     background-position: center;
     z-index: 1;
     display: flex;
     flex-direction: column;
}


 .header-simple {
    margin-bottom: 120px !important;
 }

 .header-simple h1 {
    font-size: 50px !important;
 }

 .header {
    text-align: center;
    color: #fff;
    padding: 20px;
    font-weight: 500;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    margin-top: 180px !important;
    bottom: 0;
    left: 0;
}

.contact-header {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

 .header h5 {
    font-size: 20px !important;
    margin-top: 20px;
    line-height: 1.6;
    min-height: 1.6em;
    text-align: center;
    display: block;
}
 .content {
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
     text-align: center;
}

/* --- FIXED "WHAT WE PROVIDE" SECTION --- */
.services-section {
  background-color: #33373dbd;
  padding: 6rem 4rem; /* Better padding */
  border-radius: 20px;
  position: relative;
  isolation: isolate;
  text-align: center; /* Force centering */
  max-width: 1000px;  /* Limit width for better readability */
  margin-left: auto;
  margin-right: auto;
}

 .services-section h1 {
  font-size: 3rem;
  color: #fff;
  text-align: center;
  margin-bottom: 1rem;
}
 .services-section p {
     font-size: 18px;
     color: #fff;
     text-align: center;
     max-width: 700px;
     margin: 0 auto 40px auto; /* Center the text block */
}

.services-section .btn-header3 {
    align-self: center;
}

.tech-section {
    width: 90%;
    max-width: 1200px;
    margin: 100px auto; 
    text-align: center;
}

.tech-section h2 {
    font-size: 32px;
    color: #fff;
    margin-bottom: 50px;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 600px;
    margin: 0 auto; 
}

.tech-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #33373dbd; 
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.tech-icon:hover {
    transform: translateY(-5px); 
}

.tech-icon img {
    height: 50px; 
    width: auto;
    margin-bottom: 15px;
}

.tech-icon span {
    color: #c0c0c0; 
    font-weight: 600;
}

/* --- Mobile Responsive --- */
@media (max-width: 600px) {
    .tech-grid {
        grid-template-columns: 1fr;
        max-width: 250px; 
    }
}

.service_grid {
  display: grid;
  grid-template-columns: 20rem 20rem; 
  column-gap: 80px;
  row-gap: 20px; 
  justify-items: center;
  align-items: start; 
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-decoration: none;
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: scale(1.05);
}

.service_grid img {
  width: 250px;
  height: auto;
}

.service-title {
  font-size: 24px;
  font-weight: 700;
  margin-top: 10px;
  color: #fff; 
  text-decoration: none;
}

.service-p { 
  max-width: 300px;
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  color: #fff; 
  text-align: center;
  margin-top: 10px;
}

.service-p span {
  display: block; 
  margin-top: 8px;
  text-decoration: underline;
  font-weight: 700;
}

 .why-us-home {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 60px;
     gap: 40px;
     margin-top: 100px;
}

.why-us-column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.why-us-column .button-header {
    margin-top: 50px; 
    margin-right: 50px;
}

.column-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.column-column .button-header {
    margin-top: 50px; 
}
/* ============================================
   NEW SERVICES PAGE STYLES
   ============================================ */

/* 1. Services Overview & Grid */
.services-overview {
    padding: 60px 20px;
    text-align: center;
}
.services-header h2 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 10px;
}
.services-header p {
    color: #aaa;
    margin-bottom: 40px;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
}
.service-card {
    background: #33373dbd !important; /* Your Grey */
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    transition: transform 0.3s ease;
}
.service-card:hover {
    transform: translateY(-5px);
    border-color: #007bff;
}
.service-card .icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}
.service-card h3 {
    color: #fff;
    margin-bottom: 10px;
}
.service-card p {
    color: #ccc;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* 2. Detailed Icons Row */
.service-icons-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.svc-icon-box {
    background: #33373dbd;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 150px;
    border: 1px solid #444;
    transition: 0.3s;
}
.svc-icon-box:hover {
    transform: scale(1.05);
    border-color: #007bff;
}
.svc-emoji {
    font-size: 2rem;
    margin-bottom: 10px;
}
.svc-icon-box h4 {
    color: #fff;
    margin-bottom: 5px;
}
.svc-icon-box p {
    color: #aaa;
    font-size: 0.8rem;
}

/* 3. FORCE GREY ON YOUR OLD PRICING CARDS */
/* This line updates your existing .plan-card to use the new color */
.plan-card {
    background: #33373dbd !important; 
    border: 1px solid rgba(255, 255, 255, 0.1); /* Adds a slight border */
    position: relative;
}

/* 4. Comparison Table (TRANSPARENT FIX) */
.comparison-section {
    padding: 80px 20px;
    background: #000;
}
.comparison-container {
    background: transparent !important;
}
.comparison-container h2 {
    text-align: center;
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.comp-subtitle {
    text-align: center;
    color: #aaa;
    margin-bottom: 50px;
}
.comparison-table {
    max-width: 900px;
    margin: 0 auto;
    background: transparent !important; /* Fix gap by transparency */
    border: 1px solid #444;
    border-radius: 15px;
    overflow: hidden;
    padding: 0 !important;
}
.comp-row {
    background: #33373dbd; /* Rows are Grey */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 20px;
    border-bottom: 1px solid #444;
    align-items: center;
    margin: 0 !important;
}
.comp-row:last-child {
    border-bottom: none;
}
.comp-row.header {
    background: #007bff !important; /* Header is Blue */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 25px 20px;
    border-bottom: 1px solid #0056b3;
    margin-top: 0 !important;
}
.comp-col {
    text-align: center;
    color: #fff;
    font-size: 1rem;
}
.comp-col.feature {
    text-align: left;
    font-weight: bold;
    color: #ddd;
    padding-left: 20px;
}
.comp-col.manalo {  
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.228);
}
.comp-col.others {
    color: #aaa;
    font-size: 0.9rem;
}

/* 5. Tech Stack */
.tech-section {
    padding: 60px 20px;
    text-align: center;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}
.tech-section h2 {
    color: #fff;
    margin-bottom: 30px;
}
.tech-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 800px;
    margin: 0 auto;
}
.tech-badge {
    background: #33373dbd;
    border: 1px solid #555;
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    transition: 0.3s;
    cursor: default;
}
.tech-badge:hover {
    border-color: #007bff;
    background: #007bff;
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
}

/* 6. Pure Code / Why Us */
.pure-code-section {
    padding: 80px 20px;
    text-align: center;
}
.code-container {
    background: #33373dbd !important;
    max-width: 900px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 20px;
    border: 1px solid #444;
}
.code-container h2 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 20px;
}
.code-container p {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 30px;
    line-height: 1.6;
}
.code-benefits {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.code-benefits span {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    border: 1px solid #007bff;
}
 .whyus-home {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
}
 .ser_about h1 {
     font-size: 32px;
     margin-bottom: 50px;
}
 .ser_about:hover {
     transform: scale(1.05);
     filter: brightness(1.1);
}
 .goals {
     color: white;
     font-size: 20px;
     text-align: left;
     transition: 0.5s ease;
     flex: 1;
     max-width: 700px;
     min-width: 360px; 
}
 .goal-home {
     font-size: 16px;
     font-weight: 600;
    line-height: 30px;
}
 .goals h1 {
     font-size: 32px;
     margin-bottom: 50px;
}
 .goals:hover {
     transform: scale(1.05);
     filter: brightness(1.1);
}

 .side-by-side-container {
     margin-top: 6rem;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 300px;
     width: 90%;
     max-width: 2000px;
     margin-left: auto;
     margin-right: auto;
}
 .shining-text {
    /* The gradient is the "shine" that moves across the text */
     background: linear-gradient(to right, #ffffff 20%, #006eff 40%, #006eff 60%, #ffffff 80%);
     background-size: 200% auto;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: shine 3s linear infinite;
}

 @keyframes shine {
     to {
         background-position: -200% center;
    }
}
 .cta-section {
     display: flex;
     align-items: center;
     padding: 100px;
     flex-direction: column;
     margin: 80px 0;
}
 .cta-section h1 {
     font-size: 32px;
     color: white;
}

/* =================================================================== ABOUT PAGE STYLES =================================================================== */
 .banner_about {
     background-image: url('/Photos/about_us_background.jpeg');
}
 .header_about {
     margin-top: 30px;
     font-size: 3rem;
}

 .padding_top_30 {
     padding: 30px;
     color: white;
     background-color: rgba(8, 20, 44, 0.97);
}
 .Interest {
    text-align: center;
    padding: 60px 20px;
    background-color: rgba(8, 20, 44, 0.97); 
    color: #fff;
    margin-top: 50px;
    border-radius: 0; /* Remove border-radius to make it full width */
    width: 100%; /* Make it full width */
    margin-left: 0; /* Remove auto margin */
    margin-right: 0; /* Remove auto margin */
    box-shadow: none; /* Remove box-shadow for a flat, full-width look */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ensure padding is consistent on smaller screens too */
@media (max-width: 900px) {
    .Interest {
        padding: 40px 20px; /* Adjust padding for smaller screens */
        border-radius: 0;
        box-shadow: none;
    }
}
 .button_about {
     margin: 20px;
}
 .team_about {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 40px;
     margin: 80px;
     padding: 0 20px;
     justify-items: center;
}
 .team_title {
     text-align: center;
     margin: 50px 0;
     font-size: 30px;
}
 .team-member {
     align-items: center;
     text-align: center;
}
 .about_name {
     padding-top: 15px;
}
 .about_name h3 {
     font-size: 24px;
     margin-bottom: 5px;
}
 /* Parent Container */
.content_about {
    display: flex;
    flex-wrap: wrap; /* Stacks vertically on mobile */
    justify-content: center;
    gap: 2rem; /* Cleaner spacing than px */
    padding: 4rem 2rem; /* Top/Bottom Side/Side */
    max-width: 1200px; /* Prevents it from stretching too wide on big screens */
    margin: 0 auto; /* Centers the container */
}

/* The Cards */
.align_about {
    flex: 1; /* Both boxes will try to take equal width */
    min-width: 300px; /* Prevents squishing on small screens */
    
    /* Your requested color */
    background-color: #33373dbd; 
    
    /* Modern Glass Effect (Optional, looks great with your transparent color) */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border to pop against black body */
    
    color: #f0f0f0; /* Slightly off-white is easier on eyes than pure white */
    padding: 2.5rem; /* More internal breathing room */
    border-radius: 16px; /* Modern rounded corners */
    text-align: left; /* Professional alignment */
    
    /* Smooth transitions */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Typography - Headings */
.align_about h1 {
    font-size: 2rem; /* Large, but not cartoonish */
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px; /* Tightens letters for a modern look */
    color: #ffffff;
    border-bottom: 2px solid rgba(255,255,255, 0.1); /* subtle separator line */
    padding-bottom: 1rem;
    margin-top: 0;
}

/* Typography - Body Text */
.align_about p {
    font-size: 1.1rem; /* ~17/18px - Standard modern web readable size */
    line-height: 1.7; /* Crucial for making text look "expensive" */
    color: #d1d5db; /* Lighter text for hierarchy */
    margin: 0;
}

/* Hover Effects */
.align_about:hover {        
    transform: translateY(-5px); /* Moves up slightly instead of scaling everything */
    box-shadow: 0 10px 30px rgba(0,0,0, 0.5); /* Adds depth */
}

/* 1. The Container for the whole section */
.cta_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px; /* Good vertical spacing before footer */
    text-align: center;
}

/* 2. The "Ready to Start" Card */
.cta_card {
    background-color: #33373dbd; /* Your requested color */
    backdrop-filter: blur(10px); /* Glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    padding: 3rem;
    border-radius: 16px;
    width: 100%;
    max-width: 600px; /* Prevents it from getting too wide */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4); /* Strong shadow to make it float */
}

/* 3. The Heading inside the card */
.cta_card h2 {
    font-size: 2.2rem;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
    font-weight: 700;
}

/* 4. The Divider Line */
.cta_divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.15); /* Subtle grey line */
    margin-bottom: 1.5rem;
}

/* 5. The Contact Button */
.btn-contact {
    background-color: #0056b3; /* Similar blue to your image */
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 12px 2rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    
    /* Makes the button fill the width on mobile, but auto on desktop */
    display: inline-block; 
}

.btn-contact:hover {
    background-color: #007bff; /* Brighter blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4); /* Blue glow */
}

/* 6. The Portfolio Section (Bottom part) */
.portfolio_link_container {
    margin-top: 3rem; /* Spacing between the box and this text */
    text-align: center;
}

.interested_text {
    font-size: 1.1rem;
    color: #a0a0a0; /* Muted grey so it doesn't fight with the main box */
    margin-bottom: 1rem;
}



/* Mobile responsiveness */
@media (max-width: 760px) {
    .content_about {
        flex-direction: column;
        padding: 2rem 1rem;
    }

        /* --- FOOTER FIX --- */
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    
    .footer-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-links, .footer-contact {
        text-align: center; 
        padding: 0;
    }

    .footer-image-logo {
        margin: 0 auto 15px auto;
        display: block;
    }
    /* --- END FOOTER FIX --- */
}
 @media screen and (max-width: 768px) {
     .content_about {
         grid-template-columns: 1fr;
         gap: 20px;
    }
     .header_about h1 {
         font-size: 24px;
    }
     .align_about {
         font-size: 18px;
    }
     .align_about h1 {
         font-size: 26px;
    }
}
/* =================================================================== SERVICES PAGE STYLES =================================================================== */
 .banner_services {
     background-image: url('Photos/bannerservices.png');
}
 .divider {
     width: 100%;
     height: 2px;
     background-color: #0000004c;
     margin-top: 20px;
}
 .ready_services {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 30px 20px;
}
 .ready_services h1 {
     font-size: 32px;
     padding-bottom: 20px;
}
 .whyus {
     font-size: 22px;
}
 .whyus1 {
     font-size: 30px;
     max-width: 800px;
     margin-bottom: 20px;
}

.servicepage-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    line-height: 1.6;
}

.servicepage-header {
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 1rem;
}

.servicepage-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.servicepage-header p {
    font-size: 1.125rem;
    color: #d1d5db; /* Lighter gray */
}

.tabs {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #374151; /* Gray-700 */
    margin-bottom: 3rem;
}

.tab-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px; /* Aligns with the border */
}

.tab-btn.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.tab-btn:not(.active) {
    color: #9ca3af; /* Gray-400 */
}

.tab-btn:not(.active):hover {
    color: #e5e7eb; /* Gray-200 */
}

/* --- Tab Content --- */
.tab-content {
    display: none; /* Hide by default */
}

.tab-content.active-content {
    display: block; /* Show active tab */
}

/* --- Pricing Grid --- */
.pricing-grid {
    display: grid;
    gap: 2rem;
    /* This is for "phone" (1 column) by default */
    grid-template-columns: 1fr;
}

.plan-card {
    background-color: #33373dbd; /* Gray-800 */
    border: 1px solid #374151; /* Gray-700 */
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    height: 100%; /* Makes cards in a row equal height */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    line-height: 1;
}

.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px #0052bdaa, 0 4px 6px -2px #0052bdaa; /* Indigo shadow */
}

.plan-card h3 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.plan-card .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.plan-card .price-unit {
    font-size: 1rem;
    font-weight: 500;
    color: #d1d5db;
}

.plan-card .description {
    color: #d1d5db;
    margin-top: 1.5rem;
    flex-grow: 1;
    line-height: 1.4;
}

.plan-card ul {
    list-style: none;
    margin-bottom: 2rem;
    flex-grow: 1; /* Pushes button to the bottom */
}

.plan-card li {
    color: #d1d5db;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

/* Add a checkmark before each list item */
.plan-card li::before {
    content: '✓';
    color: #34d399; /* Green-400 */
    margin-right: 0.75rem;
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* --- Popular Plan Badge --- */
.plan-card.popular {
    border: 2px solid #0052bd; /* Indigo-500 */
    position: relative;
    box-shadow: 0 10px 20px -5px #0052bd;
    overflow: hidden;
}

.plan-card.popular::before {
    content: 'Most Popular';
    position: absolute;
    top: -1px;
    right: 20px;
    background-color: #0052bd;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 0 0 8px 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* --- Free Demo Callout --- */
.demo-callout {
    /* Use the same background as the plan cards */
    background-color: #33373dbd; 
    border: 1px solid #374151;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    text-align: center;
    margin-top: 3rem; /* Space above */
    margin-bottom: 3rem; /* Space below */
    
    /* Center it and give it a max-width */
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

.demo-callout h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.demo-callout p {
    font-size: 1.125rem;
    color: #d1d5db; /* Lighter gray */
    margin-bottom: 2rem;

    /* Make text lines easier to read */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Style the demo button */
.demo-callout .demo-button {
    /* Use a "go" or "free" color */
    background-color: #0052bd; /* Green-400 */
    color: #ffffff; /* Dark text for high contrast */
    
    /* Don't make it full-width */
    max-width: 300px;
    margin: 0 auto; /* Center the button */
}

.demo-callout .demo-button:hover {
    background-color: #007bff; /* Brighter blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4); /* Blue glow */
}

/* --- Call-to-Action Buttons --- */
.cta-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    margin-bottom: 1.5rem;
}

.cta-button {
    background-color: #0052bd; /* Indigo-500 */
    color: #ffffff;
}

.cta-button:hover {
    background-color: #007bff; /* Brighter blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4); /* Blue glow */
}

.cta-button.secondary {
    background: transparent;
    border-color: #9ca3af;
    color: #ffffff;
}

.cta-button.secondary:hover {
    background-color: #007bff; /* Gray-700 */
    border-color: #374151;
}

@media (max-width: 768px) {
    .cta-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
    .plan-card{
        position: relative;
    }

}
/* --- Hosting Note Link --- */
.hosting-note {
    text-align: center;
    margin-top: 2rem;
    color: #9ca3af;
}

#hosting-link, #hosting-link2 {
    color: #0052bd; /* Indigo-400 */
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

#hosting-link:hover, #hosting-link2:hover {
    color: #3876c7; /* Indigo-300 */
    text-decoration: underline;
}

/* "tablet" and "desktop" styles */
@media (min-width: 768px) {
    .pricing-grid:not(.hosting-grid) {
        grid-template-columns: repeat(2, 1fr);
    }
    .hosting-grid {
        grid-template-columns: repeat(3, 1fr);
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    .pricing-grid:not(.hosting-grid) {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =================================================================== CONTACT PAGE STYLES =================================================================== */
 body.banner-contact { background: #b1b1b1; }
 body.banner-contact .navbar ul li a { color: #ffffff;
     transition: color 0.3s ease;
}
 body.banner-contact .navbar ul li a:hover, body.banner-contact .navbar ul li a.active {
     color: #006eff;
}
 .contact-container {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     padding: 0 20px;
}
 .contact-left {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 20px;
}
 .contact-left-tittle h2 {
     color: #072b99;
     font-weight: 600;
     font-size: 60px;
     margin-bottom: 5px;
     text-align: left;
}
 .contact-left-tittle hr {
     border: none;
     border-radius: 10px;
     width: 250px;
     height: 5px;
     background-color: #072b99;
     margin-bottom: 20px;
}
 .contact-input {
    font-size: 1rem;
     width: 400px;
     height: 50px;
     border: none;
     outline: none;
     padding: 25px;
     font-weight: 600;
     color: #000000;
     border-radius: 50px;
}
 .contact-container textarea {
     height: 140px;
     padding-top: 15px;
     border-radius: 20px;
     resize: vertical;
}
 .contact-input:focus {
     border: 2px solid #072b99;
}
 .contact-input::placeholder {
     color: #4f4f4f;
}
 .contact-left button {
     display: flex;
     align-items: center;
     padding: 15px 30px;
     font-size: 1rem;
     color: #fff;
     border: none;
     border-radius: 50px;
     background: linear-gradient(270deg, #072b99, #0a3bce);
     cursor: pointer;
}
 .contact-right img {
     width: 500px;
}

.contact-demo {
    font-size: 1.2rem;
}

/* NEW: Styles for the dropdown to make it 'nice' */
/* FIXED SELECT FIELD STYLING */
.contact-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 400px;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 25px;
    font-weight: 600;
    font-size: 1rem;
    color: #000;
    border-radius: 50px;
    background-color: #fff;
    cursor: pointer;

    /* custom arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23072b99' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 25px center;
    padding-right: 50px;
    max-width: 60%;
}

/* Placeholder color */
.contact-select option[value=""] {
    color: #4f4f4f;
    font-weight: 500;
}

/* Regular option style */
.contact-select option {
    color: #000;
    background-color: #fff;
    font-size: 1.2rem;
}

/* Focus border */
.contact-select:focus {
    border: 2px solid #072b99;
}

/* Why Choose Us Section */
.why-us-section {
    padding: 50px 20px;
    background-color: #000000;
    text-align: center;
}

.why-us-section h1 {
    margin-bottom: 40px;
    font-size: 2.5rem;
    color: #fff;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.feature-card {
    background: #33373dbd;
    padding: 30px;
    border-radius: 15px;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-card .icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #fff;
}

.feature-card p {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.6;
}

/* Process Section - FIXED */
.process-section {
    padding: 60px 20px;
    background-color: #000; 
    text-align: center;
    position: relative;
    z-index: 0; /* Keeps the whole section low */
}

.process-section h1 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 2.5rem;
}

.process-subtitle {
    color: #888;
    margin-bottom: 50px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.process-step {
    background: #33373dbd;
    padding: 30px 20px;
    border-radius: 10px;
    position: relative;
    border-bottom: 2px solid transparent;
    transition: 0.3s ease;
    cursor: pointer;
}

.process-step:hover {
    border-bottom: 2px solid #007bff; 
    background: #151515;
}

.step-number {
    font-size: 3rem;
    font-weight: 700;
    color: #222;
    position: absolute;
    top: 10px;
    right: 20px;
    opacity: 0.5;
    /* Removed z-index here to keep it natural */
}

.process-step:hover .step-number {
    color: #007bff;
    opacity: 0.2;
}

/* THIS WAS THE PROBLEM AREA - FIXED NOW */
.process-step h3, 
.process-step p {
    position: relative;
    /* Removed z-index: 2 */
}

.process-step h3 {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 15px;
}

.process-step p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Who We Are - Manifesto Style */
.who-we-are-section {
    padding: 100px 20px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.who-container {
    /* OLD: background: linear-gradient(...) */
    /* NEW: */
    background: #33373dbd; 
    
    /* Keep the rest */
    width: 100%;
    min-width: 300px;
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid #222;
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 0 40px rgba(0, 123, 255, 0.05);
    position: relative;
    overflow: hidden;
}

/* Decorative Blue Top Line */
.who-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #00d4ff);
}

.who-badge {
    display: inline-block;
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.who-container h2 {
    font-size: 3rem;
    color: #fff;
    margin: 0;
    font-weight: 700;
}

.who-divider {
    width: 60px;
    height: 3px;
    background: #333;
    margin: 30px auto; /* Centers the line */
}

.who-container h3 {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 400;
}

.who-container p {
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 700px; /* Keeps text line length readable */
    margin: 0 auto 20px auto; /* Centers the paragraphs */
}

/* Mobile Adjustment */
@media (max-width: 600px) {
    .who-container {
        padding: 40px 20px;
    }
    .who-container h2 {
        font-size: 2.2rem;
    }
    .who-container h3 {
        font-size: 1.4rem;
    }
}

/* Moving Reviews Section */
.reviews-section {
    padding: 60px 0; /* No side padding, full width */
    background-color: #000;
    overflow: hidden; /* Hides the scrollbar */
    position: relative;
}

.reviews-section h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
    font-size: 2rem;
}

.reviews-track {
    display: flex;
    width: calc(250px * 8 + 320px); /* Math ensures track is long enough */
    animation: scroll 20s linear infinite; /* The moving magic */
    gap: 40px;
}

/* The Animation Keyframes */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 4 - 160px)); /* Moves exactly half way then loops */
    }
}

/* Infinite Slider Section */
.reviews-section {
    background-color: #000;
    padding: 60px 0;
    overflow: hidden; /* Hides anything outside the screen */
}

.reviews-section h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
    font-size: 2rem;
}

.slider {
    margin: auto;
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    align-items: center;
}

.slide-track {
    display: flex;
    gap: 40px; /* The space between cards */
    
    /* MATH EXPLAINED: 
       Card width (300px) + Gap (40px) = 340px per item.
       We have 12 items total.
       340px * 12 = 4080px
    */
    width: 4080px; 
    
    animation: scroll 40s linear infinite;
}

.review-card {
    background: #33373dbd;
    width: 300px;
    height: 160px;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.review-card p {
    color: #ddd;
    font-style: italic;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.review-card span {
    color: #007bff;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* The Animation Logic */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* We move exactly HALF the track width.
           Total width is 4080px. Half is 2040px.
           This means when it finishes, the first card of the 
           second half is in the exact position of the start.
        */
        transform: translateX(-2040px); 
    }
}

/* Optional: Pause when user hovers */
.slide-track:hover {
    animation-play-state: paused;
}

/* --- NEW: Custom Radio Button Styles --- */

.radio-group-container {
    width: 100%;
    padding: 15px 25px; /* Give it space inside */
    box-sizing: border-box;
    background: #ffffff; /* Match other inputs */
    border-radius: 25px; /* Rounded corners for the container */
    border: 2px solid transparent; /* For focus */
    transition: border-color 0.2s ease;
}

/* Add focus state to the whole container when a radio is focused */
.radio-group-container:focus-within {
     border-color: #072b99;
}

.radio-group-label {
    display: block;
    color: #4f4f4f; /* Match placeholder text color */
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 15px;
}

/* NEW: Wrapper for horizontal layout */
.radio-options-horizontal-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    justify-content: space-between; /* Evenly space the items */
    gap: 10px; /* Add gap for wrapping */
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between button and label */
    margin-bottom: 0; /* Remove bottom margin */
}
.radio-option:last-child {
    margin-bottom: 0;
}

.contact-radio {
    /* Remove default browser appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Dimensions */
    min-width: 22px;
    height: 22px;
    
    /* "Round" style */
    border: 2px solid #072b99;
    border-radius: 50%; /* This makes it round */
    background-color: #fff;
    
    cursor: pointer;
    position: relative;
    
    /* For centering the dot */
    display: grid;
    place-items: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* The inner dot */
.contact-radio::before {
    content: '';
    width: 12px; /* Size of the inner dot */
    height: 12px;
    border-radius: 50%;
    background: #072b99;
    
    /* Hide the dot by default */
    opacity: 0;
    transform: scale(0.5); /* Start small */
    transition: all 0.2s ease;
}

/* Show the inner dot when checked */
.contact-radio:checked::before {
    opacity: 1;
    transform: scale(1); /* Grow to full size */
}

/* Change border color when checked (optional, but nice) */
.contact-radio:checked {
    border-color: #072b99;
}

/* The label for each radio button */
.radio-label {
    color: #333;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    user-select: none; /* Prevents text selection */
}

/* Add a focus ring for accessibility */
.contact-radio:focus-visible {
    outline: 2px solid #0a3bce;
    outline-offset: 2px;
}
/* --- End of Radio Button Styles --- */

/* --- Portfolio Slider --- */

.banner_portfolio {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('Photos/coding.png');
}

/* The grid container */
.project-grid {
    display: grid;
    /* This creates 3 equal-width columns on desktop */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Space between the cards */
    padding: 50px 0; /* Padding above/below the grid */
    width: 90%;
    max-width: 1200px; /* Set a max width */
    margin: 0 auto; /* Center the grid */
}

/* The card itself */
.project-card {
    /* Use a dark color from your theme */
    background-color: #33373dbd; /* A dark navy/purple to match your theme */
    border-radius: 10px;
    overflow: hidden; /* This keeps the image corners rounded */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.project-card:hover {
    transform: translateY(-5px); /* Lifts the card on hover */
    box-shadow: 0 8px 25px rgba(0, 110, 255, 0.2); /* A blue-ish glow */
}

/* The screenshot image */
.project-card img {
    width: 100%;
    height: 200px; /* Fixed height for all images */
    object-fit: cover; /* This crops the image to fit, keeping it uniform */
    display: block;
}

.btn-project::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Places the click layer over everything else */
}

/* The text content area */
.card-content {
    padding: 25px;
}

.card-content h3 {
    font-size: 22px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 15px;
}

.card-content p {
    font-size: 16px;
    color: #c0c0c0; /* A light grey for the body text */
    line-height: 1.6;
    margin-bottom: 20px;
}

/* The "Visit Site" button */
.btn-project {
    display: inline-block;
    background-color: #007bff; /* Blue to match your navbar links */
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn-project:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* --- Mobile Responsive --- */
@media (max-width: 900px) {
    .project-grid {
        /* Change to 2 columns for tablets */
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-container {
        grid-template-rows: auto 1fr; /* One auto row, then one fraction of available space */
        grid-template-columns: 1fr 1fr;
        text-align: center;
        justify-items: center;
    }
    .footer-container :first-child {
        grid-column: 1 / -1; /* Make the large item span all columns */    }

    .services-section {
        margin: 0 2.5rem;
    }
}

@media (max-width: 600px) {
    .project-grid {
        /* Stack to 1 column on phones */
        grid-template-columns: 1fr;
    }

    .services-section {
    max-width: 100%;
    padding: 4rem 2rem;
    min-width: 150px;
    max-width: 360px;
    }


}

 .slider-sec {
     padding: 2rem;
}
.slider-btn {
    /* Positioning */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    
    /* Styling */
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 9px 20px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Position each button */
#prev-btn {
    left: 15px;
}

#next-btn {
    right: 15px;
}
 .slider-wrapper {
     position: relative;
     max-width: 48rem;
     margin: 0 auto;
}
 .slider {
     display: flex;
     aspect-ratio: 16/9;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     box-shadow: 0 1.5rem 3rem hsla(0, 0%, 0%, 0.25);
     scrollbar-width: none;
     border-radius: 10px;
}
 .slider::-webkit-scrollbar {
     display: none;
}
 .slider img {
     flex: 1 0 100%;
     scroll-snap-align: start;
     object-fit: cover;
}
 .slider-nav {
     display: flex;
     column-gap: 0.5rem;
     position: absolute;
     bottom: 1.25rem;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1;
}
 .slider-nav a {
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
     background: #fff;
     opacity: 0.75;
     transition: opacity ease 250ms;
}
 .slider-nav a:hover {
     opacity: 1;
}

/* --- FIX: "INTERESTED?" SECTION --- */
.Interest {
    text-align: center;
    padding: 60px 20px;
    background-color: rgba(8, 20, 44, 0.97); /* Keeping your preferred color */
    color: #fff;
    margin-top: 50px;
    border-radius: 10px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Interest h1 {
    font-size: 40px;
    margin-bottom: 20px;
    color: #fff;
}

.Interest p {
    font-size: 18px;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 700px;
}

.messagesent {
    display: absolute;
    margin-top: 20%;
    text-align: center;
    padding: 50px;
    color: white;
    background-color: rgba(8, 20, 44, 0.97);
}

.message H1 {
    font-size: 32px;
    margin-bottom: 30px;
}

.message p {
    font-size: 22px;
}

/* =================================================================== TABLET & MOBILE RESPONSIVE STYLES =================================================================== */

/* --- 1. TABLET / IPAD PRO STYLES (901px to 1200px) --- */
/* GOAL: Mostly Side-by-Side Layout + Hamburger Menu + STACKED Process/Features */
@media only screen and (min-width: 901px) and (max-width: 1200px) {

    /* --- NAVBAR: Use Hamburger --- */
    .navbar-links, .nav-menu, .navbar > ul { 
        display: none !important; 
    }

    #hamburger-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        cursor: pointer;
        z-index: 9999;
    }

    #hamburger-btn span {
        width: 100%;
        height: 3px;
        background-color: #fff;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    .btn-header2.nav-button {
        margin-left: auto;
        margin-right: 20px;
    }
    
    /* Mobile Menu Overlay */
    #nav-links {
        display: none;
        background: rgba(10, 20, 40, 0.97);
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9998;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
    }
    #nav-links.active { display: flex !important; }
    #nav-links li { list-style: none; width: 80%; text-align: center; margin: 0; }
    #nav-links li a { font-size: 24px; padding: 15px; display: block; color: #fff; }

    /* --- FIX: STACK "Our Process" & "Why Choose" on iPad/Tablet --- */
    .process-grid, 
    .features-grid {
        grid-template-columns: 1fr !important; /* Force 1 Column */
        width: 100% !important;
        gap: 30px;
        padding: 0 20px;
    }

    /* --- LAYOUT: Keep Side-by-Side for other sections --- */
    .services-section, .why-us-home, .about-section, .side-by-side-container, .cta-section {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .why-us-home .why-us-home-img img, 
    .about-img img {
        width: 100%;
    }
}


/* --- 2. MOBILE & IPAD MINI STYLES (Everything under 900px) --- */
/* GOAL: Stacked Layout (Phone Version) */
@media only screen and (max-width: 900px) {

    /* --- NAVBAR & BUTTONS --- */
    .btn-header2.nav-button {
        margin-left: auto;
        margin-right: 20px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        margin: 0 0.5rem;
    }

    .service-card{
        max-width: 520px;
    }

    /* --- INTERESTED SECTION FIX --- */
    .Interest .button-header {
        flex-direction: column;
        gap: 20px;
    }

    /* --- FIX: STACK "Our Process" & "Why Choose" on Phone --- */
    .process-grid, 
    .features-grid {
        grid-template-columns: 1fr !important; /* Force 1 Column */
        width: 100% !important;
        gap: 30px;
        padding: 0 10px;
    }
    
    .process-step, 
    .feature-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- LAYOUT: Stack Everything Vertically --- */
    
    /* Force "What We Offer" stack */
    .service_grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 50px;
    }
    .service_grid img {
        width: 100%; 
        max-width: 250px;
    }

    /* Force "Goals" and "Pricing" stack */
    .side-by-side-container {
        grid-template-columns: 1fr !important; /* 1 Column */
        gap: 50px;
        padding: 0 20px;
        width: 100% !important;
        overflow-x: hidden;
    }

    .column-column, .why-us-column {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Force Text Alignment Left */
    .why-us-home, .about-section {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px;
        text-align: left !important;
    }
    .about-section {
        flex-direction: column-reverse;
    }

    .why-us-column, .column-column, .why-us-text, .about-us-text, .goals, .ser_about, .why-us-home-text, .about-text {
        text-align: left !important;
        align-items: flex-start !important;
        margin-right: 0;
    }

    .button-header, .why-us-column .button-header, .column-column .button-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 30px;
        margin-top: 20px;
    }

    /* --- GENERAL SIZING --- */
    .banner {
        min-height: 100vh !important;
        background-position: center top !important;
    }
    .banner .header {
        margin-top: 20vh !important;
        font-size: clamp(1rem, 6vw, 2rem) !important;
        line-height: 1.2 !important;
        padding: 0 1rem !important;
    }

    
    .services-section h1, .why-us-home h1, .about-text h1, .ser_about h1, .goals h1, .cta-section h1 {
        font-size: 28px;
    }

    .slider-wrapper, .slider {
        max-width: 100% !important;
        width: 100% !important;
    }
    .slider img {
        width: 100vw !important;
        height: auto !important;
        max-height: 40vh !important;
        object-fit: cover !important;
    }

    .why-us-home-img, .about-img {
        justify-content: center;
    }
    .why-us-home-img img, .about-img img {
        width: 100%;
    }
    
    .cta-section {
        padding: 40px 20px;
        margin-bottom: 50px;
    }
    .contact-right { display: none; }
    .slider-sec { padding: 1rem 0 !important; }
    .Interest { padding: 40px 20px !important; }
    .header_about { margin-top: 0; padding-top: 50px; }
    .content_about { padding: 20px; padding-top: 50px; grid-template-columns: 1fr; }
    .team_about { gap: 40px; margin: 50px 20px; grid-template-columns: 1fr; }
    .team-member { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0; }
    .about_name { padding-left: 0; padding-top: 20px; }
    .contact-left-tittle h2 { font-size: 40px; }
    .contact-input { width: 100%; }
    
    /* Navbar Styles */
    .navbar { width: 100%; padding: 0.7rem; }
    #hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        cursor: pointer;
        z-index: 9999;
    }
    #hamburger-btn span {
        width: 100%;
        height: 3px;
        background-color: #fff;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }
    body.banner-contact #hamburger-btn span { background-color: #fff; }
    #hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
    #hamburger-btn.active span:nth-child(2) { opacity: 0; }
    #hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }
    .navbar > ul { display: none; }
    
    #nav-links {
        display: none;
        background: rgba(10, 20, 40, 0.97);
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9998;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
    }
    #nav-links.active { display: flex; }
    #nav-links li { list-style: none; width: 80%; text-align: center; margin: 0; }
    #nav-links li a { font-size: 24px; padding: 15px; display: block; color: #fff; }
}

@media (hover: none) and (pointer: coarse) {
    body > .flashlight-overlay {
        display: none !important;
    }
}