/* Style.css - TAG Security, Cleaning & HR Service Plc. - Modern One UI Inspired Theme */

/* 1. Global Reset & Box Sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Color Palette (CSS Variables) - KEPT AS IS, NO COLOR CHANGE */
:root {
    --primary-dark: #3D7BC0; /* Deep Navy Blue - for headers, backgrounds */
    --secondary-dark: #74A3E4; /* Even darker blue - for accents, footer */
    --accent-gold: #FFD700; /* Gold - for highlights, call-to-action */
    --light-grey: #F5F5F5; /* Light background for sections */
    --dark-text: #333333; /* Standard text color */
    --light-text: #080545; /* Text on dark backgrounds */
    --border-color: #3A4E66; /* Subtle border color */
    /* New variable for subtle shadow, inspired by One UI elevation */
    --shadow-light: 0 4px 12px rgba(0,0,0,0.08); /* Softer, wider shadow */
    --shadow-medium: 0 6px 18px rgba(0,0,0,0.12); /* Slightly more pronounced */
    --border-radius-large: 20px; /* More curvy */
    --border-radius-medium: 12px; /* Medium curvy */
    --border-radius-small: 8px; /* Slightly curvy */
}

/* 3. Base Body Styles */
body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif; /* Modern, clean font stack */
    line-height: 1.7; /* Slightly increased for better readability */
    color: var(--dark-text);
    background-color: var(--light-grey);
    scroll-behavior: smooth;
}

/* 4. Headings & Paragraphs */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif; /* Consistent modern font */
    color: var(--primary-dark);
    margin-bottom: 0.7em; /* Slightly reduced spacing for tighter feel */
    line-height: 1.3;
    font-weight: 600; /* Slightly bolder for presence */
}

h1 {
                                        font-size: 3em;
                                        text-align: left;
} /* Slightly larger */
h2 {
                                        font-size: 2.4em;
                                        text-align: justify;
} /* Slightly larger */
h3 { font-size: 1.9em; } /* Slightly larger */
p {
                                        margin-bottom: 1.2em; /* More spacing for paragraphs */
                                        font-size: xx-large; /* Slightly larger text */
                                        line-height: 1.6;
                                        color: hsla(244,87%,15%,1);
}

/* 5. Links */
a {
    color: var(--primary-dark);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease; /* Added transform for subtle feedback */
}

a:hover {
    color: var(--accent-gold);
    text-decoration: none; /* No underline on hover for a cleaner look, use color change only */
    transform: translateY(-1px); /* Subtle lift */
}

/* 6. Header Styles */
.main-header {
    background-color: var(--primary-dark);
    padding: 20px 0; /* More padding */
    color: var(--light-text);
    box-shadow: var(--shadow-light); /* Using defined shadow variable */
    position: sticky; /* Sticky header */
    top: 0;
    z-index: 1000; /* Ensure it stays on top */
}

.header-container {
    max-width: 1300px; /* Wider container */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px; /* More horizontal padding */
    flex-wrap: wrap;
}

.logo img {
    height: 65px; /* Slightly adjusted logo size */
    width: auto;
    display: block;
    border-radius: var(--border-radius-small); /* Subtle rounded corners for logo */
}

/* Burger menu toggle button */
.menu-toggle {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    font-size: 1.8em;
    color: var(--light-text);
    cursor: pointer;
    padding: 10px;
    transition: transform 0.3s ease;
}

.menu-toggle i {
    transition: transform 0.3s ease;
}

.main-nav ul {
    list-style: none;
    display: flex;
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
}

.main-nav ul li {
    margin-left: 35px; /* Increased spacing between nav items */
}

.main-nav ul li a {
                                        color: var(--light-text);
                                        font-weight: 500; /* Slightly less bold */
                                        font-size: 1.15em; /* Slightly larger font */
                                        padding: 8px 0; /* More vertical padding */
                                        position: relative; /* For the underline effect */
                                        transition: color 0.3s ease, transform 0.2s ease;
                                        background-color: #EFCC4D;
}

.main-nav ul li a::after { /* One UI inspired subtle underline */
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px; /* Position below text */
    width: 0;
    height: 3px; /* Thickness */
    background-color: var(--accent-gold);
    transition: width 0.3s ease-out;
}

.main-nav ul li a:hover {
                                        color: hsla(244,87%,15%,1);
                                        transform: translateY(-2px); /* Lift on hover */
}

.main-nav ul li a:hover::after,
.main-nav ul li a.active::after { /* Active state also has underline */
    width: 100%;
}


/* 7. Hero Section (Homepage) */
.hero-section {
    /* Updated background image path as requested */
    background: url('background.jpg') no-repeat center center/cover;
    color: var(--light-text);
    text-align: center;
    padding: 120px 30px; /* More padding for a grander feel */
    min-height: 70vh; /* Taller hero section */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* For overlay */
}
.hero-section {
}
.hero-section {
	background-image: url(../Images/background.jpg);
}



.hero-section::before { /* Semi-transparent overlay for better text readability */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Darker overlay */
    z-index: 1;
}

.hero-section > * { /* Ensure content is above overlay */
    position: relative;
    z-index: 2;
}

.hero-section h1 {
	font-size: 4.2em; /* Larger, more impactful */
	margin-bottom: 20px;
	color: var(--accent-gold);
	text-shadow: 2px 3px 6px rgba(0,0,0,0.8); /* More pronounced shadow */
	letter-spacing: -0.02em;
	background-position: 0% 0%;
	background-size: 800px 600px;
}

.hero-section p {
    font-size: 1.6em; /* Larger paragraph */
    max-width: 900px; /* Wider text area */
    margin-bottom: 40px; /* More space before button */
    text-shadow: 1px 2px 4px rgba(0,0,0,0.6);
}

.btn {
    display: inline-block;
    background-color: var(--accent-gold);
    color: var(--primary-dark);
    padding: 16px 35px; /* Larger button */
    border-radius: var(--border-radius-medium); /* More rounded */
    font-weight: 700; /* Bolder text */
    font-size: 1.15em; /* Larger font */
    letter-spacing: 0.02em;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Added box-shadow transition */
    box-shadow: var(--shadow-light); /* Initial button shadow */
}

.btn:hover {
    background-color: #E0B000; /* Slightly darker gold */
    transform: translateY(-3px); /* More pronounced lift */
    box-shadow: var(--shadow-medium); /* Darker shadow on hover */
    text-decoration: none;
}

/* 8. Section Styles */
.section-padding {
    padding: 80px 30px; /* Increased padding for sections */
    max-width: 1300px; /* Wider content area */
    margin: 0 auto;
}

.section-light {
    background-color: var(--light-grey);
}

.section-dark {
    background-color: var(--primary-dark);
    color: var(--light-text);
}

.section-dark h2, .section-dark h3 {
                                        color: hsla(47,91%,32%,1);
}

/* 9. Grid/Flexbox Layouts (for Services, About, etc.) */
.grid-2-cols, .grid-3-cols {
    display: grid;
    gap: 40px; /* Increased gap */
    margin-top: 50px; /* More top margin */
}

.grid-2-cols {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Slightly larger min-width */
}

.grid-3-cols {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Slightly larger min-width */
}

.card {
    background-color: #FFFFFF;
    padding: 35px; /* More padding inside cards */
    border-radius: var(--border-radius-large); /* Significantly more rounded corners */
    box-shadow: var(--shadow-light); /* Soft shadow */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05); /* Very subtle border for definition */
}

.card:hover {
                                        transform: translateY(-8px); /* More pronounced lift */
                                        box-shadow: var(--shadow-medium);
                                        left: auto;
                                        clip: rect(auto,auto,auto,auto);
                                        letter-spacing: normal;
                                        list-style-position: inside;
                                        top: auto;
                                        text-align: left;
}

.card h3 {
                                        color: hsla(42,92%,45%,1);
                                        margin-top: 20px;
                                        margin-bottom: 12px;
                                        font-size: 1.6em; /* Larger card titles */
                                        font-weight: 600;
}

.card p {
                                        font-size: 1.05em;
                                        text-align: left;
}

.card img {
    max-width: 120px; /* Larger icon size */
    margin-bottom: 20px;
}

/* About Section Specific Enhancements */
.about-content {
    margin-bottom: 40px; /* Space before the flex container */
}

.about-content h2 {
    margin-bottom: 25px;
}

.about-content p {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto; /* Center paragraph */
}

/* Adjustments for the flex container within "Who We Are" section */
.about-mission-image-container { /* Renamed for clarity */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px; /* More space between text and image */
    margin-top: 50px; /* Increased margin */
}

.about-mission-card { /* Renamed for clarity */
    background-color: #FFFFFF; /* Make mission statement look like a card */
    padding: 30px;
    border-radius: var(--border-radius-large); /* More curvy */
    box-shadow: var(--shadow-light);
    flex: 1 1 50%; /* Allow it to grow */
    min-width: 300px; /* Ensure it doesn't get too small */
}

.about-mission-card h3 {
                                        font-size: 2em; /* Larger mission heading */
                                        margin-bottom: 15px;
                                        color: hsla(42,92%,45%,1); /* Mission heading in gold */
}

.about-mission-card p {
    font-size: 1.1em;
    line-height: 1.7;
}

.about-image-wrapper { /* Wrapper for image to apply consistent styling */
    flex: 1 1 45%;
    min-width: 300px; /* Ensure it doesn't get too small */
    display: flex; /* To center image if needed */
    justify-content: center;
    align-items: center;
}

.about-image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-large); /* More rounded image corners */
    box-shadow: var(--shadow-medium); /* More prominent shadow for images */
}


/* "Our Core Services" section adjustments */
/* The section itself remains distinct with section-dark background,
   but its content (cards) are made very curvy and well-spaced. */
.our-services-section {
    /* No specific changes here to make it "attached" by background,
       as it's meant to be a distinct dark section.
       Focus is on making the *cards* within it more integrated visually. */
}

/* 10. Footer Styles */
.main-footer {
    background-color: var(--secondary-dark);
    color: var(--light-text);
    text-align: center;
    padding: 40px 20px; /* More padding */
    font-size: 0.95em; /* Slightly larger text */
    border-top: 1px solid var(--border-color); /* Subtle top border */
}

.main-footer p {
                                        margin: 0;
                                        line-height: 1.5;
                                        text-align: center;
                                        font-size: 16px;
}

/* 11. Forms (Contact, Portfolio/Careers) */
form {
    background-color: #FFFFFF;
    padding: 40px; /* More padding */
    border-radius: var(--border-radius-large); /* More rounded */
    box-shadow: var(--shadow-light); /* Soft shadow */
    max-width: 650px; /* Slightly wider form */
    margin: 50px auto; /* More margin */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
}

form label {
    display: block;
    margin-bottom: 10px; /* More space */
    font-weight: 600; /* Bolder label */
    color: var(--primary-dark);
    font-size: 1.05em;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea,
form select {
    width: 100%;
    padding: 14px; /* More padding */
    margin-bottom: 25px; /* More space between fields */
    border: 1px solid #e0e0e0; /* Lighter border */
    border-radius: var(--border-radius-medium); /* More rounded input fields */
    font-size: 1.05em;
    color: var(--dark-text);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form textarea:focus,
form select:focus {
    outline: none;
    border-color: var(--primary-dark); /* Highlight border on focus */
    box-shadow: 0 0 0 3px rgba(26, 46, 68, 0.2); /* Subtle blue glow */
}

form textarea {
    resize: vertical;
    min-height: 150px; /* Taller textarea */
}

form button[type="submit"] {
    background-color: var(--primary-dark);
    color: var(--light-text);
    padding: 16px 30px; /* Larger button */
    border: none;
    border-radius: var(--border-radius-medium); /* More rounded */
    font-size: 1.15em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: var(--shadow-light);
}

form button[type="submit"]:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-medium);
	color: #8DDDA8;
}

/* Contact Info Items */
.contact-info-grid { /* New wrapper for contact items to use grid */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    justify-content: center; /* Center items if they don't fill the row */
}

.contact-info-item {
    background-color: #FFFFFF;
    padding: 30px;
    border-radius: var(--border-radius-large); /* More curvy */
    box-shadow: var(--shadow-light);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-info-item:hover {
                                        transform: translateY(-8px);
                                        box-shadow: var(--shadow-medium);
                                        color: hsla(244,87%,15%,1);
}

.contact-info-item h3 {
    font-size: 1.8em;
    margin-bottom: 15px;
    color: var(--accent-gold); /* Gold headings */
    font-weight: 600;
}

.contact-info-item p {
    font-size: 1.05em;
    line-height: 1.6;
    margin-bottom: 0.5em;
}

.contact-info-item a {
    color: var(--primary-dark);
    font-weight: 500;
}

.contact-info-item a:hover {
    color: var(--accent-gold);
    text-decoration: underline;
}
.main-header .header-container {
                                        background-color: hsla(35,81%,78%,1.00);

}
.main-header {
}
.main-header {
}
.main-header {
                                        background-color: hsla(47,84%,62%,1.00);
}
.main-header .header-container {
                                        background-color: hsla(47,84%,62%,1.00);
}
.main-header .header-container .main-nav {
                                        color: hsla(244,74%,5%,1.00);
                                        clear: left;
                                        background-color: hsla(47,84%,62%,1.00);
}
.section-padding.section-light {
                                        text-align: left;
}
.main-footer {
                                        background-color: hsla(47,84%,62%,1.00);
}
ul li a {
                                        color: hsla(243,86%,15%,1.00);
}
ul li a {
                                        color: hsla(243,86%,15%,1.00);
}
ul li .active {
                                        color: hsla(243,86%,15%,1.00);
}
ul li a {
                                        color: hsla(243,86%,15%,1.00);
}
ul li a {

}
ul li span {
                                        text-align: left;
}
.section-padding.section-light.gallery-section .gallery-grid {
}
.section-padding.section-light.gallery-section .gallery-grid {

}
.section-padding.section-dark.staff-section .text-center.max-width-900.mx-auto strong {
                                        color: hsla(0,0%,94%,1.00);
}
.section-padding.section-dark.staff-section .row .col-lg-3 {
                                        color: hsla(45,100%,59%,1);
                                        text-align: center;
                                        font-size: 16px;
}
.section-padding.section-dark.staff-section .row {
                                        background-color: hsla(82,24%,85%,1.00);
                                        color: hsla(244,87%,15%,1);
}
.col-lg-offset-4.col-lg-3 p span {
                                        color: hsla(62,100%,38%,1.00);
}
.section-padding.section-dark.staff-section .other-staff-section .text-center {
}
.section-padding.section-dark.staff-section .other-staff-section .text-center {
                                        color: hsla(243,86%,15%,1.00);
                                        -webkit-box-shadow: inset 0px 0px;
                                        box-shadow: inset 0px 0px;
}
.section-padding.section-dark.staff-section .row {
                                        background-color: hsla(0,0%,100%,1.00);
                                        color: hsla(244,87%,15%,1);
}
.row .col-lg-3.col-xs-8.text-justify strong {
                                        text-align: justify;

}
.row .col-lg-3 p {
                                        font-size: 12px;
}
.main-header {
                                        background-color: hsla(54,47%,85%,1.00);
}
.main-header .header-container .logo {
}
.section-padding.section-light .contact-info-grid .contact-info-item {
                                        background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(169,211,67,1.00) 100%);
                                        background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(169,211,67,1.00) 100%);
                                        background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(169,211,67,1.00) 100%);
                                        background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(169,211,67,1.00) 100%);
}
.section-padding.section-dark.staff-section .qualifications-section.card {
                                        background-image: -webkit-linear-gradient(49deg,rgba(255,255,255,1.00) 0%,rgba(37,159,14,0.65) 100%,rgba(40,255,0,1.00) 100%);
                                        background-image: -moz-linear-gradient(49deg,rgba(255,255,255,1.00) 0%,rgba(37,159,14,0.65) 100%,rgba(40,255,0,1.00) 100%);
                                        background-image: -o-linear-gradient(49deg,rgba(255,255,255,1.00) 0%,rgba(37,159,14,0.65) 100%,rgba(40,255,0,1.00) 100%);
                                        background-image: linear-gradient(41deg,rgba(255,255,255,1.00) 0%,rgba(37,159,14,0.65) 100%,rgba(40,255,0,1.00) 100%);
}
.hero-section {
	background-position: 0% 0%;
	background-repeat: no-repeat;
	background-image: url(../Images/rev-1.jpg);
}
































/* 12. Responsive Design (Media Queries) */
@media (max-width: 992px) { /* Adjusted breakpoint for larger tablets */
    .hero-section h1 {
                                        font-size: small;

    }
.section-padding.section-dark.staff-section .row .col-lg-3 {
                                        font-size: small;

}

    .hero-section p {
        font-size: 1.4em;
    }
    .section-padding {
        padding: 60px 25px;
    }
    .grid-2-cols, .grid-3-cols {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjust min-width */
        gap: 30px;
    }
    .contact-info-grid {
                                        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust for 2 columns on tablets */
                                        background-color: hsla(45,90%,65%,1.00);
                                        color: hsla(243,86%,15%,1.00);
    }
    .about-mission-image-container {
        flex-direction: column; /* Stack on larger tablets */
    }
    .about-mission-card, .about-image-wrapper {
        width: 100%;
        flex: none; /* Remove flex grow/shrink */
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: row; /* Keep logo and toggle on one row */
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }

    .main-nav {
        display: none; /* Hide navigation by default */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        background-color: var(--primary-dark);
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        padding: 20px 0;
        transition: transform 0.3s ease-out;
        transform: translateY(-100%); /* Start off-screen */
        z-index: 999;
    }

    .main-nav.active {
        display: flex; /* Show navigation when active */
        transform: translateY(0); /* Slide in */
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
        align-items: center; /* Center nav items */
    }
    .main-nav ul li {
        margin: 15px 0; /* More vertical spacing */
    }
    .main-nav ul li a {
        padding: 10px 0; /* Adjust padding for stacked nav */
        font-size: 1.2em; /* Larger font for mobile */
    }
    .main-nav ul li a::after {
        left: 50%;
        transform: translateX(-50%); /* Center underline */
    }

    .menu-toggle {
        display: block; /* Show burger icon on mobile */
    }
    .menu-toggle.active i.fa-bars {
        display: none;
    }
    .menu-toggle.active i.fa-times {
        display: block;
    }


    .hero-section {
        padding: 100px 20px;
        min-height: 60vh;
    }
    .hero-section h1 {
        font-size: 3em;
    }
    .hero-section p {
        font-size: 1.3em;
    }

    .grid-2-cols, .grid-3-cols {
        grid-template-columns: 1fr; /* Stack columns on small screens */
        gap: 25px;
    }
    .section-padding {
        padding: 50px 20px;
    }
    .card {
        padding: 30px;
    }
    .contact-info-grid {
        grid-template-columns: 1fr; /* Stack all contact info items */
    }
    form {
        padding: 30px;
        margin: 30px auto;
    }
    form input[type="text"],
    form input[type="email"],
    form input[type="tel"],
    form textarea,
    form select {
        padding: 12px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2.5em; }
    h2 { font-size: 2em; }
    h3 { font-size: 1.6em; }

    .hero-section {
        padding: 80px 15px;
    }
    .hero-section h1 {
        font-size: 2.2em;
    }
    .hero-section p {
        font-size: 1.1em;
    }
    .btn {
        padding: 14px 28px;
        font-size: 1em;
    }
    .section-padding {
        padding: 40px 15px;
    }
    .card {
        padding: 25px;
    }
    .about-mission-card {
        padding: 25px;
    }
}