/* --- 1. CORE STYLES --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; background: #f0f2f5; }

/* 1. Global fix to prevent horizontal overflow */
html, body {
    /*overflow-x: hidden;*/
    width: 100%;
    margin: 0;
    padding: 0;
}

body { 
    font-family: sans-serif; 
    /*padding: 20px; */
    background: #f4f4f4; 
}

/* Add a wrapper to handle overflow instead of the body */
/*.site-wrapper {
    overflow-x: hidden;
    width: 100%;
}*/

/* 2. Make ALL images responsive automatically */
img {
    max-width: 100%;
    height: auto;
}

/* --- 2. NAVIGATION --- */
nav {
    background: #1a1a1a;
    color: white;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo { 
    font-size: 1.5rem; 
    font-weight: 800; 
    color: #3498db; 
    text-decoration: none; 
}

.logo img {
    margin-top: 12px;
}

/* --- 3. MENU STRUCTURE --- */
.nav-links {
    display: flex;
    list-style: none;
    height: 100%;
}

.nav-item {
    position: relative;
    height: 100%;
}

.nav-item > a {
    color: white;
    text-decoration: none;
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 100%;
    transition: 0.3s;
}

/* --- 4. SUB-MENU (HIDDEN) --- */
.sub-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    background: #2c3e50;
    min-width: 180px;
    list-style: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.sub-menu li a {
    padding: 15px 20px;
    color: #bdc3c7;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #34495e;
}

.sub-menu li a:hover { 
    background: #3498db; 
    color: white; 
}

/* --- 5. HOVER LOGIC (Desktop & Mobile Simulation) --- */
.nav-item:hover .sub-menu {
    display: block;
}
    
.nav-item:hover > a {
    background: #333;
    color: #3498db;
}

/* --- 6. MOBILE "MARK" (HAMBURGER) --- */
.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 1.8rem;
    user-select: none;
}

/* --- 7. RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 768px) {
    .menu-toggle { 
        display: block; 
    }
    
    .nav-links {
        display: none; /* Hide main menu on mobile */
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: #1a1a1a;
        height: auto;
    }

    .nav-links.active {
        display: flex; /* Show when 'mark' is clicked */
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid #333;
    }

    .nav-item > a {
        padding: 20px;
        justify-content: space-between;
    }

    .sub-menu {
        position: static; /* Stack inside the menu */
        width: 100%;
        background: #000;
    }
}

/* --- 8. SECTIONS --- */
/*section {
    /*padding: 100px 10%;
    min-height: 100vh;*/
    /*padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
}*/

section {
    padding: 60px 20px; /* Vertical padding, small horizontal padding for mobile */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centers the container on the page */
    width: 100%;
    box-sizing: border-box;
}

#sec1 { 
    background: #ffffff; 
    background-image: url("/images/web-design-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

#sec2 { background: #dfe6e9; }
#sec3 { background: #ffffff; }
#sec4 { background: #dfe6e9; }
#sec5 { background: #ffffff; }

/* Yung added 03252026 */
#our_story, #web-design, #email-marketing {
    padding: 17px 27px;
    margin: 0 17px;
    background: #F9FAFC;
    border: 1px solid #92AED3;
    border-radius: 17px;
}

#email-marketing {
    margin-top: 47px;
}

h2 { font-size: 3rem; margin-bottom: 1rem; color: #2c3e50; }

/*p { font-size: 1.2rem; max-width: 600px; }*/
p { font-size: 1.2rem; max-width: 100%; }

.contact-container { 
    max-width: 500px; 
    margin: auto; 
    background: white; 
    padding: 30px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

.captcha-wrapper-contact {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

/*.form-group { 
    margin-bottom: 15px; 
}

label { 
    display: block;
    margin-top: 5px; 
    font-weight: bold; 
}

input, textarea { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    margin-bottom: 7px;
}*/


/* Container for each row */
.form-group { 
    display: flex;
    align-items: center; /* Vertically centers the label with the input */
    margin-bottom: 15px; 
}

/* Give labels a fixed width so inputs align vertically */
label { 
    flex: 0 0 100px; /* Label will always be 100px wide */
    font-weight: bold; 
    margin-right: 10px;
}

/* Let the input take up the remaining space */
input, textarea { 
    flex: 1; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
}

/* Adjust textarea to align with the top of the label */
.form-group.message-group {
    align-items: flex-start;
}


button { 
    background: #3498db; 
    color: white; 
    padding: 10px 20px; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    width: 100%; 
    font-size: 16px; 
}

button:hover { 
    background: #2980b9; 
}
        
/* Anti-Bot Honeypot: Hide this from humans */
.hidden-field { 
    display: none !important; 
    visibility: hidden; 
}

/*Yung added 03242026 */
#web-design ul li {
    margin-left: 47px;
}

#email-marketing ul li {
    margin-left: 47px;
}

/*.web-design {
/* This allows the content to expand to 95% of the screen 
but stops at 1400px so it stays readable on large desktops */
    /*width: 95%; 
    max-width: 1400px; 
    padding: 0 37px;
    margin: 0 auto;
    text-align: left;
    color: #1476A3;
}*/

.web-design {
    display: flex;
    flex-direction: row;
   /*ackground-color: #96B2D8;*/
    margin: 0 17px;            
}


/* Yung added 06252026 */
/* 1. Reset the list to remove any broken browser defaults */
/*.web-design ul {
    list-style: none !important; /* Kill the invisible browser bullets */
    /*padding-left: 25px !important; /* Create a 'gutter' for our new bullets */
    /*margin: 15px 0 !important;
}

/* 2. Style the list items to prepare for the manual bullet */
/*.web-design ul li {
    position: relative; /* This allows us to anchor the bullet to the text */
    /*margin-bottom: 12px;
    line-height: 1.4;
    display: block; /* Ensures flexbox or block layouts don't break it */
    /*color: #1D457B; /* Matches your current heading color */
}

/* 3. Create the manual bullet using the ::before selector */
/*.web-design ul li::before {
    content: "•"; /* The bullet character */
   /* position: absolute;
    left: -20px; /* Moves it into the 25px padding gutter we made above */
    /*color: #3498db; /* A nice blue to make it pop */
    /*font-size: 1.5rem;
    line-height: 1;
    top: -2px; /* Fine-tune the vertical alignment */
}
/* ---- End ------ */






.web-design-1 {
    background-color: #E6ECF5;
    color: #1D457B;
    width: 100%;
    margin: 1px;
    padding: 27px;
    text-align: left;  
    font-size: 17px;
    box-shadow: 5px 10px 7px #888888;
    border: 1px solid;
    border-radius: 17px;
}

h2 { width: 95%;max-width: 1400px;margin-bottom: 20px;font-size: 2.5rem; }

/*ul {
    padding-left: 20px; /* Standard indentation for bullets */
    /*display: grid;
    /* Extra Tip: This makes your list items sit in two columns on big screens! */
    /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}*/

/*@media (max-width: 768px) {
    .web-design {
        flex-direction: column; /* Vertical for phones */
        /*margin: 0 10px; /* Optional: reduce margin on small screens
    } */
    
    /* Optional: Ensure the image scales properly on mobile */
    /*.web-design-1 img {
        width: 100%;
        height: auto;
        overflow: hidden
    }
} */

/* 3. Mobile-specific overrides for 768px and below */
@media (max-width: 768px) {
    
    /* Fix the specific contact form captcha margin */
    #sec5 div[style*="margin: 20px 0 20px 115px;"] {
        margin: 20px 0 !important;
        display: flex;
        justify-content: center; /* Center the captcha instead of pushing it right */
    }

    /* Fix the estimate form captcha margin */
    .captcha-wrapper {
        margin-left: 0 !important;
        display: flex;
        justify-content: center;
    }

    /* Ensure labels don't push content off-screen */
    .lable1, label {
        flex: none !important;
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 5px;
    }

    /* Fix the side-by-side divs in sec1 */
    .web-design {
        display: block; /* Stack them vertically */
        width: 100%;
    }

    .web-design-1 {
        width: 100% !important;
        padding: 27px;
        margin-bottom: 30px;
    }






    /* Force forms to stack vertically so inputs have room */
    .form-group {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    label, .lable1 {
        flex: none !important;
        width: 100% !important;
        margin-bottom: 5px !important;
        text-align: left !important;
    }

    /* Reset the huge margins pushing content off-screen */
    .captcha-wrapper, 
    .captcha-wrapper-contact, 
    .checkbox-group {
        margin-left: 0 !important;
        width: 100% !important;
        display: flex;
        justify-content: center;
    }



    /* Force the table to stop behaving like a table */
    .responsive-table, 
    .responsive-table thead, 
    .responsive-table tbody, 
    .responsive-table tr, 
    .responsive-table td {
        display: block;
        width: 100%;
    }

    /* Hide table headers if they aren't needed in a stack */
    .responsive-table thead {
        display: none;
    }

    .responsive-table td {
        /* Add spacing between the newly stacked "rows" */
        margin-bottom: 10px;
        padding: 15px;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
    }
}