/* main.css */

:root {
    /* Colors */
    --color-primary: #26005b;
    --color-accent: #00bcd4;
    --color-body: #333;
    --color-bg: #f4f4f4;
    --color-tint: #f0f2ff;
    --color-header-bg: #DDF2FF;
    --color-footer-bg: #3B4553;
    --color-footer-text: #eee;
    --color-muted: #aaaa;
    --color-info: #3958e9;
    --color-btt: #007bff;
    --color-btt-hover: #0056b3;

    /* Spacing */
    --space-1: 10px;
    --space-2: 20px;
    --space-3: 30px;
    --space-4: 40px;
    --space-5: 50px;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    color: var(--color-body);
}

/* Preserve intrinsic image ratio and avoid stretching */
img {
    height: auto;
}

main {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Reserve space only before header is injected to avoid gap on mobile */
#header-placeholder:empty {
    min-height: 90px;
}

/* --- Header Styles --- */
.main-header {
    background-color: var(--color-header-bg);
    color: var(--color-primary);
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.site-logo {
    margin: 0; /* Remove default margin from h1 if it's there */
    flex-shrink: 0; /* Prevent logo from shrinking */
}

.site-logo img {
    max-height: 60px; /* Set a max height for your logo */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
}

.site-logo a {
    display: block;
    line-height: 0; /* Remove extra space from line-height if using an <a> tag */
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.main-nav li {
    margin: 0 15px;
}

.main-nav a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2vw;
    transition: color 0.3s ease-in-out;
    padding: 5px 0;
    display: block;
}

.main-nav a:hover,
.main-nav a:focus {
    color: var(--color-accent);
    text-decoration: underline;
}

.main-nav a.active { color: var(--color-accent); text-decoration: underline; }

.menu-toggle {
    display: none;
    font-size: 3vw;
    background: none;
    border: none;
    color: #26005b;
    cursor: pointer;
    padding: 5px 10px;
    order: 2;
}

/* --- Header Styles --- */

h1,
h2,
h3 {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-primary);
    text-align: center;
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
}

h1 {
    font-size: clamp(28px, 4vw, 64px);
    text-transform: uppercase;
    margin-bottom: 0;
}

h2 {
    font-size: clamp(22px, 3vw, 48px);
    margin-top: 0;
}

h3 {
    font-size: clamp(18px, 2.2vw, 32px);
    margin: 0;
}

p {
    font-size: clamp(14px, 1.2vw, 18px);
    color: var(--color-primary);
    margin-bottom: 0;
    text-align: left;
}

.content-wrap {
    max-width: 1200px;
    min-height: 100px;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 10px 10px 10px;
}

.box-wrap {
    display: flex;       /* Use Flexbox for columns */
    flex-wrap: wrap;     /* Allow columns to wrap onto new lines on smaller screens */
    justify-content: space-around; /* Distribute space evenly */
    max-width: 1200px;   /* Max width for the footer content */
    margin: 0 auto;      /* Center the footer content */
    gap: 20px;           /* Space between columns */
    padding: 10px 20px 10px 20px;
}

.content-box {
    display: block; /* Helps center stacked lists */
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 30px 10px 30px 60px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
    box-sizing: border-box; /* Include padding in width calculation */
}

.btn {
    background-color: #1F51FF;
    padding: 10px;
    display: inline-block;
    color: #fdfffc;
    transition: background-color 1s ease-in;
    cursor: pointer;
}

.btn:hover {
    background-color: #E49B0F;
    color: #fdfffc;
}

.btn:focus {
    border: 2px solid #235789;
}

/* --- For message --- */
textarea {
    width: 100%;
}
#name, #email, #mobile {
    width: 40%;
    color: blue;
}
.flex-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.button-success {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: rgb(28, 184, 65); /* this is a green */
    font-size: 125%;
}

/* --- Hero Styles --- */

.hero {
    background: #232325;
    background-size: cover;
    text-align: center;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.hero-img {
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
}

.home-hero {
    background: #232325;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

video {
    width: 100%;
    vertical-align: bottom;
    object-fit: cover;
}

.home-hero .content-wrap-1 {
    min-height: 40vh;
    text-align: center;
    position: absolute;
    top: 20%;
    left: 0%;
    color: #f0f2ff;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0);
}

.home-hero .content-wrap-2 {
    text-align: center;
    position: absolute;
    top: 75%;
    left: 0%;
    color: #f0f2ff;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0);
}

.home-hero .content-wrap-3 {
    text-align: center;
    position: absolute;
    top: 82%;
    left: 0%;
    color: #f0f2ff;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0);
}

/* --- Hero Styles --- */

/* --- Welcome Section Styles --- */

.welcome {
    background: var(--color-tint);
}

.welcome-img {
    display: block;
    margin: auto;
    width: 100%;
    aspect-ratio: 4/3;
    padding: 10px 0 10px 0;
}

.welcome h2 {
    margin-bottom: clamp(16px, 2.5vw, 40px);
}

.welcome p {
    margin-bottom: clamp(10px, 1vw, 30px);
}

/* --- Welcome Section Styles --- */

/* --- Service Section Styles --- */

.services {
    background: #ffffff;
    color: #fdfffc;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.services a {
    color: #fdfffc;
}

.services-box {
    background-color: #F5F5F5;
    flex: 1;             /* Each column takes equal flexible space */
    max-width: 1200px;   /* Max width for the footer content */
    min-width: 30%;    /* Minimum width before wrapping */
    padding: 10px;       /* Padding inside each column */
    box-sizing: border-box; /* Include padding in width calculation */
    text-align: center;    /* Align text left within columns */
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.services-box h3 {
    padding-bottom: 10px;
}

.services-box img {
    max-height: 90px;
    max-width: 90px;
    display: block;
    padding: 10px 0 10px 0;
}

.fas {
    font-size: clamp(24px, 3vw, 64px);
}

/* --- Service Section Styles --- */

/* --- Testimonials Section Styles --- */

.testimonials {
    background: var(--color-tint);
}

.testimonials p {
    text-align: left;
}

.google-map {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.testimonials-img {
    display: block;
    margin: auto;
    width: 100%;
    aspect-ratio: 16/9;
    padding: 10px 0 10px 0;
}

/* --- Testimonials Section Styles --- */

/* --- Footer Styles --- */
footer {
    background-color: var(--color-footer-bg); /* Slightly darker for better contrast */
    color: var(--color-footer-text);            /* Lighter text */
    padding: 30px var(--space-5) 10px var(--space-5);     /* More padding */
    font-size: 1.5vw;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.footer-content {
    display: flex;       /* Use Flexbox for columns */
    flex-wrap: wrap;     /* Allow columns to wrap onto new lines on smaller screens */
    justify-content: space-around; /* Distribute space evenly */
    margin: 0 auto;      /* Center the footer content */
    gap: var(--space-5);           /* Space between columns */
}

.footer-column {
    flex: 1;             /* Each column takes equal flexible space */
    min-width: unset;    /* Minimum width before wrapping */
    padding: 15px;       /* Padding inside each column */
    box-sizing: border-box; /* Include padding in width calculation */
    text-align: center;    /* Align text left within columns */
}

.footer-column h3 {
    color: var(--color-accent);      /* Highlight column titles */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 2vw;
    border-bottom: 1px solid rgba(0, 188, 212, 0.3); /* Subtle underline */
    padding-bottom: 5px;
}

.footer-column ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: left;
}

.footer-column ul li {
    margin-bottom: 8px; /* Space between list items */
}

.footer-column a {
    color: var(--color-footer-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.footer-column p {
    font-size: 1.5vw;
    margin: 7px;
}

/* minor text utility not color-tokenized elsewhere */
.text-blue { color: blue !important; }

/* Contact column: center the column; keep six lines left-aligned as a group */
.footer-contact { text-align: center; }
.footer-contact .contact-lines {
    display: inline-block; /* center the group */
    text-align: left;      /* lines inside left-aligned */
}

.footer-bottom-text {
    text-align: center;
    margin-top: 30px; /* Space above copyright text */
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Separator line */
    color: var(--color-muted); /* Slightly lighter for copyright */
    font-size: 1.2vw;
}

.footer-bottom-text p {
    text-align: center;
    margin: 0 auto;
}

.back-to-top .fas {
    position: fixed; /* Stays in the same spot relative to the viewport */
    bottom: 20px;    /* 20 pixels from the bottom of the viewport */
    right: 20px;     /* 20 pixels from the right of the viewport */
    background-color: var(--color-btt); /* Example background color */
    color: white;              /* Icon color */
    padding: 10px 12px;        /* Adjust padding for good spacing around the icon */
    border-radius: 50%;        /* Makes it a circle */
    font-size: 2vw;           /* Size of the icon */
    display: flex;             /* Use flexbox for perfect centering of the icon */
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow */
    z-index: 1000;             /* Ensures it stays on top of other content */
    text-decoration: none;     /* Removes underline from link */
    opacity: 0; /* hidden by default; shown after scroll */
    /* Add transition for a fade-in effect when showing it */
    transition: opacity 0.3s ease-in-out;
}

.back-to-top:hover .fas {
    background-color: var(--color-btt-hover); /* Darker blue on hover */
    cursor: pointer;
    opacity: 1;
}

.back-to-top.show .fas {
    opacity: 0.8;
}

/* --- Adjustments for Mobile --- */
@media (min-width: 900px) {
    .col-narrow {
        width: 30%;
        float: left;
    }

    .col-wide {
        width: 60%;
        float: right;
        text-align: left;
    }
}

/* --- Additional utilities --- */
.text-white { color: #ffffff !important; }
.text-hero { color: var(--color-tint) !important; }
.text-info { color: var(--color-info) !important; }
.pb-10 { padding-bottom: 10px !important; }
.map-frame { border: 0 !important; }
.minh-300 { min-height: 300px !important; }
.minh-400 { min-height: 400px !important; }
.minh-600 { min-height: 600px !important; }
.minh-800 { min-height: 800px !important; }
.mt-about-img { margin-top: clamp(20px, 10vw, 80px) !important; }
.mt-services-img { margin-top: clamp(20px, 8vw, 80px) !important; }
.mt-services-h2 { margin-top: clamp(16px, 4vw, 40px) !important; }
.mb-services-p { margin-bottom: clamp(16px, 4vw, 40px) !important; }
.mb-service-card { margin-bottom: clamp(8px, 2vw, 16px) !important; }

@media (max-width: 899px) {
    /* --- Header Styles --- */

    .main-header {
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 15px;
    }

    .site-logo img {
        max-height: 50px;
    }

    .main-nav {
        flex-basis: 100%;
        order: 3;
        display: none;
        text-align: center;
        background-color: #DDF2FF;
        padding: 10px 0;
        margin-top: 10px;
        min-height: 0;
    }

    .main-nav.active {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
    }

    .main-nav li {
        margin: 10px 0;
        width: 100%;
    }

    .main-nav a {
        padding: 10px 0;
        font-size: 2vw;
    }

    .menu-toggle {
        display: block;
    }

    /* --- Header Styles --- */

    h1,
    h2,
    h3 {
        font-family: 'Open Sans', sans-serif;
        color: #26005b;
        text-align: center;
        font-weight: bold;
        margin-left: 20px;
        margin-right: 20px;
    }

    /* Font sizes handled by clamp() above */
    p { text-align: left; }

    .home-hero {
        padding: 0;
    }

    .col-narrow {
        width: 100%;
        float: center;
    }

    .col-wide {
        width: 100%;
        float: center;
        text-align: left;
        margin: 10px auto;
    }

    .welcome {
        text-align: center;
    }

    .welcome-img {
        display: block;
        margin: auto;
        width: 50%;
    }

    .box-wrap {
        display: block;       /* Use Flexbox for columns */
        flex-wrap: wrap;     /* Allow columns to wrap onto new lines on smaller screens */
        justify-content: space-around; /* Distribute space evenly */
        margin: 0 auto;      /* Center the footer content */
        gap: 20px;           /* Space between columns */
        padding: 10px 20px 10px 20px;
    }

    .services {
        display: block;
        width: 100%;
        background: #ffffff;
        color: #fdfffc;
    }

    .services-box {
        background-color: #F5F5F5;
        display: block; /* Helps center stacked lists */
        width: 100%;
        min-width: unset;
        padding: 30px;
        box-shadow: 0 -5px 8px rgba(0, 0, 0, 0.3);
        box-sizing: border-box; /* Include padding in width calculation */
        min-height: 250px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .fas {
        font-size: clamp(24px, 6vw, 64px);
    }

    .testimonials-img {
        display: block;
        margin: auto;
        width: 60%;
        aspect-ratio: 16/9;
        padding: 10px 0 10px 0;
    }

    /* --- Footer Styles --- */

    .footer-column {
        flex-basis: 45%; /* Two columns per row on medium screens */
        min-width: unset; /* Remove min-width to allow more flexibility */
        text-align: center; /* Center text when stacked */
    }

    .footer-column h3 {
        font-size: 2.5vw;
        text-align: center; /* Center titles */
    }

    .footer-column ul {
        font-size: 2vw;
        display: inline-block; /* Helps center stacked lists */
        text-align: left; /* Keep list items left-aligned within their block */
    }

    .footer-column p {
        font-size: 2vw;
        margin: 7px;
    }

    /* --- Footer Styles --- */

    #name, #email, #mobile {
        width: 60%;
        color: blue;
    }

    .flex-container {
        display: flex;
        flex-direction: column;
    }

}

/* --- Utility spacing/text classes to replace inline styles --- */
.mt-0 { margin-top: 0 !important; }
.mt-2vw { margin-top: 2vw !important; }
.mt-3vw { margin-top: 3vw !important; }
.mt-4vw { margin-top: 4vw !important; }
.mt-5vw { margin-top: 5vw !important; }
.mt-10vw { margin-top: 10vw !important; }
.mb-2vw { margin-bottom: 2vw !important; }
.mb-3vw { margin-bottom: 3vw !important; }
.mb-4vw { margin-bottom: 4vw !important; }
.mb-5vw { margin-bottom: 5vw !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.narrow-center { width: 75%; text-align: center; margin-left: auto; margin-right: auto; }