@import 'variables.css';

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-main);
    line-height: 1.6;
    background-color: var(--color-light-gray);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    margin-bottom: var(--spacing-sm);
    color: var(--color-secondary);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.highlight {
    color: var(--color-primary);
}

/* Header */
.site-header {
    background-color: var(--color-white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-secondary);
}

.main-nav ul {
    display: flex;
    gap: var(--spacing-md);
}

.main-nav a {
    font-weight: 600;
    font-size: 1rem;
    position: relative;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--color-primary);
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background-color: var(--color-secondary);
    transition: 0.3s;
}


/* Search Button in Header */
.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--color-secondary);
    padding: 0.5rem;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-btn:hover {
    color: var(--color-primary);
}

/* Footer */
.site-footer {
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: var(--spacing-lg) 0 var(--spacing-md);
    margin-top: auto;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.footer-col h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid var(--color-secondary-light);
    padding-top: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* Utility Classes */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 4px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--color-primary-dark);
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-md);
    font-size: 2rem;
    color: var(--color-secondary);
    position: relative;
    padding-bottom: 0.5rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--color-primary);
}

/* Cards Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

.card {
    background: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

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

.card-content {
    padding: var(--spacing-sm);
}

/* Initial dummy content spacing */
main {
    padding: 0 0 var(--spacing-lg) 0;
    /* Remove top padding to fix hero banner gap */
}

/* Page header styling for consistent layout */
.page-header {
    margin-bottom: var(--spacing-lg);
    padding-top: var(--spacing-md);
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
    }

    .main-nav {
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--color-white);
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
        display: none;
        flex-direction: column;
        padding: var(--spacing-md);
    }

    .main-nav.open {
        display: flex;
    }

    .main-nav ul {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
}

/* =========================================
   Premium Project Detail Page Styles
   ========================================= */

/* Hero Banner */
.project-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    color: white;
}

.project-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.9) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 3rem;
    width: 100%;
}

.hero-badge {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    color: white;
}

.hero-location {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.9;
}

/* Page Layout */
.project-content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    padding: 4rem 0;
}

/* Left Column Styling */
.detail-section {
    margin-bottom: 4rem;
}

.detail-section h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
    display: inline-block;
    border-bottom: 3px solid var(--color-primary);
}

.overview-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-main);
}

/* At a Glance Table */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

.specs-table tr {
    border-bottom: 1px solid #eee;
}

.specs-table tr:last-child {
    border-bottom: none;
}

.specs-table td {
    padding: 1rem 1.5rem;
    font-size: 1rem;
}

.specs-label {
    font-weight: 600;
    color: var(--color-secondary);
    width: 40%;
    background: #f9f9f9;
}

/* Features Grid */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.amenity-item {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s;
}

.amenity-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.amenity-icon {
    width: 40px;
    height: 40px;
    background: rgba(211, 47, 47, 0.1);
    /* Primary color light */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

/* Map Section */
.map-container {
    height: 350px;
    background: #eee;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}

/* Sidebar Styling */
.project-sidebar {
    position: sticky;
    top: 100px;
}

.enquiry-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-top: 5px solid var(--color-primary);
}

.enquiry-card h3 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1rem;
}

.form-input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.enquiry-submit {
    width: 100%;
    padding: 1rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.3s;
}

.enquiry-submit:hover {
    background: var(--color-primary-dark);
}

.brochure-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem;
    margin-top: 1rem;
    background: var(--color-secondary);
    color: white;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.3s;
}

.brochure-btn:hover {
    background: #333;
}

/* Responsive */
@media (max-width: 900px) {
    .project-content-wrapper {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .project-hero {
        height: 50vh;
    }

    .project-sidebar {
        position: static;
        margin-top: 2rem;
    }
}

/* =========================================
   ESPIN Style Layout (New Request)
   ========================================= */

.espin-container {
    background: #fff;
    font-family: 'Arial', sans-serif;
    /* Standard web font for corporate look */
}

.espin-header {
    padding: 3rem 0 1rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
}

.espin-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.espin-address {
    font-size: 1.1rem;
    color: #666;
}

.open-map-link {
    color: var(--color-primary);
    font-weight: bold;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.espin-banner img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    border-radius: 4px;
}

.espin-body {
    display: flex;
    gap: 3rem;
    margin-top: 3rem;
    padding-bottom: 3rem;
}

.espin-main-col {
    flex: 2;
}

.espin-section {
    margin-bottom: 3rem;
}

.espin-section h3 {
    font-size: 1.5rem;
    color: #222;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.espin-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.espin-feature-item {
    font-size: 1rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.check-icon {
    color: green;
    font-weight: bold;
}

/* Nearby List */
.nearby-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.nearby-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px dashed #eee;
}

.nearby-label {
    font-weight: bold;
    color: #444;
}

.nearby-value {
    color: #777;
}

/* Floor Plan Tabs */
.fp-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ddd;
}

.fp-tab-btn {
    padding: 0.8rem 1.5rem;
    background: #f5f5f5;
    border: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-weight: 600;
    color: #666;
    transition: all 0.3s;
}

.fp-tab-btn.active {
    background: var(--color-primary);
    color: white;
}

.fp-pane {
    display: none;
}

.fp-pane.active {
    display: block;
    animation: fadeIn 0.5s;
}

.fp-image {
    width: 100%;
    border: 1px solid #eee;
    padding: 0.5rem;
}

/* Sidebar */
.espin-sidebar {
    flex: 1;
}

.espin-contact-box {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 4px;
    border: 1px solid #eee;
}

.espin-contact-box h3 {
    margin-bottom: 1.5rem;
}

.espin-form input,
.espin-form textarea {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.espin-form button {
    width: 100%;
    padding: 1rem;
    background: var(--color-secondary);
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.espin-form button:hover {
    background: #333;
}

/* Responsive */
@media (max-width: 768px) {
    .espin-body {
        flex-direction: column;
    }

    .espin-title {
        font-size: 1.8rem;
    }

    .fp-tabs {
        flex-direction: column;
    }

    .fp-tab-btn {
        width: 100%;
        text-align: left;
    }
}

/* =========================================
   Updates for Gallery, Overview & Video
   ========================================= */

/* Title Red & Bold */
.espin-title-red {
    font-size: 2.5rem;
    color: #e60000;
    /* Red color */
    font-weight: 800;
    margin-bottom: 0.5rem;
}

/* Gallery */
.espin-gallery {
    margin-bottom: 3rem;
}

.gallery-main img {
    width: 100%;
    height: 500px;
    object-fit: contain;
    border-radius: 4px;
    margin-bottom: 1rem;
    transition: opacity 0.3s;
}

.gallery-thumbs {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.thumb-item {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.thumb-item.active,
.thumb-item:hover {
    opacity: 1;
    border-color: var(--color-primary);
}

/* Overview Grid */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 8px;
}

.overview-item {
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 0;
    border-bottom: 1px dotted #ccc;
    font-size: 0.95rem;
}

.ov-label {
    font-weight: bold;
    color: #555;
}

.ov-value {
    color: #333;
    font-weight: 600;
}

/* Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Share Buttons */
.share-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.share-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    min-width: 100px;
}

.share-btn.fb {
    background: #3b5998;
}

.share-btn.tw {
    background: #1da1f2;
}

.share-btn.ln {
    background: #0077b5;
}

.share-btn.wa {
    background: #25d366;
}


/* =========================================
   Updates for Icons & Grid Layouts
   ========================================= */

/* Overview Grid Updates */
.overview-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    /* Force 5 columns Desktop */
}

.overview-item {
    display: flex;
    flex-direction: column;
    /* Stack icon and text or row? User said "Before information" */
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
}

.ov-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.ov-content {
    display: flex;
    flex-direction: column;
}

.ov-label {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
}

.ov-value {
    font-size: 1rem;
    font-weight: 700;
}

/* Icon Color */
.icon-red {
    color: #e60000;
}

/* Nearby List Updates */
.nearby-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.nearby-item {
    border: 1px solid #f0f0f0;
    padding: 1rem;
    border-radius: 4px;
    background: #fdfdfd;
}

/* Responsive Updates for Overview */
@media (max-width: 900px) {
    .overview-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 Columns Mobile */
    }
}

/* =========================================
   Overview UI Polish (Icon Box)
   ========================================= */

.overview-grid {
    gap: 1.5rem !important;
    background: transparent !important;
    /* Remove gray bg if present */
    padding: 0 !important;
}

.overview-item {
    flex-direction: row !important;
    /* Side by side */
    align-items: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 1rem !important;
}

.ov-icon-box {
    width: 50px;
    height: 50px;
    background: #f8f9fa;
    /* Light gray background */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ov-icon-box i {
    color: #ff0000;
    /* Red Icon */
    font-size: 1.25rem;
}

.ov-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ov-label {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 2px;
    font-weight: normal;
    text-transform: none;
    /* Reset uppercase if set previously */
}

.ov-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
}

/* =========================================
   Font Size Reduction (User Request)
   ========================================= */

/* Title */
.espin-title-red {
    font-size: 2rem !important;
    /* Was 2.5rem */
}

.espin-address {
    font-size: 1rem !important;
    /* Was 1.1rem */
}

/* Section Headers */
.espin-section h3 {
    font-size: 1.3rem !important;
    /* Was 1.5rem */
    margin-bottom: 1rem !important;
}

/* Overview Items */
.ov-label {
    font-size: 0.75rem !important;
    /* Was 0.8rem */
}

.ov-value {
    font-size: 0.9rem !important;
    /* Was 1rem */
}

.ov-icon-box {
    width: 40px !important;
    /* Smaller box */
    height: 40px !important;
}

.ov-icon-box i {
    font-size: 1rem !important;
    /* Smaller icon */
}

/* Nearby Items */
.nearby-label {
    font-size: 0.9rem !important;
}

.nearby-value {
    font-size: 0.9rem !important;
}

/* Features */
.espin-feature-item {
    font-size: 0.9rem !important;
}


/* =========================================
   Final Polish (Gap, Image Height, Alignment)
   ========================================= */

/* 1. Remove Top Gap */
.espin-header {
    padding-top: 0 !important;
    margin-top: 1rem !important;
    /* Minimal margin from nav */
    border-bottom: none !important;
    /* Cleaner look? Optional, keeping based on prev design */
}

/* 2. Image Height */
.gallery-main img {
    height: 650px !important;
    /* Increased Desktop Height */
}

/* 3. Overview Alignment */
.overview-item {
    align-items: center !important;
    /* Vertically center icon box and text */
    justify-content: flex-start !important;
    gap: 0.8rem !important;
    /* Closer gap */
}

.ov-content {
    align-items: flex-start !important;
    /* Align text block to left */
    text-align: left !important;
}

/* Mobile Adjustments */
@media (max-width: 768px) {

    /* Mobile Image Height */
    .gallery-main img {
        height: 250px !important;
        /* Reduced Mobile Height */
    }

    .espin-title-red {
        font-size: 1.5rem !important;
        /* Further reduce title on mobile if needed */
    }

    .espin-header {
        padding-bottom: 0.5rem !important;
    }
}

/* =========================================
   Reduce Gap Above Main Image
   ========================================= */
.espin-header {
    margin-bottom: 0.5rem !important;
    /* Reduced from 2rem */
    padding-bottom: 0 !important;
}

.espin-banner {
    margin-top: 0 !important;
}

/* =========================================
   Further Reduce Gap (1/4th)
   ========================================= */
.espin-header {
    margin-bottom: 0.1rem !important;
    /* Extremely small margin */
    padding-bottom: 0 !important;
}

.espin-address {
    margin-bottom: 0.2rem !important;
    /* Ensure p tag doesn't hold space */
}

/* =========================================
   Fix Nearby Overflow on Mobile
   ========================================= */
@media (max-width: 768px) {
    .nearby-list {
        grid-template-columns: 1fr !important;
        /* Force 1 column on mobile */
        width: 100% !important;
        box-sizing: border-box;
    }

    .espin-container,
    .espin-body,
    .espin-main-col {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* =========================================
   Global Mobile Overflow Fix (Aggressive)
   ========================================= */
html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* Ensure nothing exceeds viewport width on mobile */
@media (max-width: 768px) {
    * {
        box-sizing: border-box;
    }

    .container {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 1rem;
        /* Keep some padding */
        padding-right: 1rem;
        overflow-x: hidden;
    }

    .espin-header,
    .espin-main-col {
        width: 100% !important;
    }
}

/* =========================================
   Reduce Address Font Size (User Request)
   ========================================= */
.espin-address {
    font-size: 13px !important;
    /* Reduced from 1rem/16px to ~13px */
    color: #555;
    /* Slightly lighter for less visual weight */
}

/* =========================================
   Reduce Mobile Header-Image Gap
   ========================================= */
@media (max-width: 768px) {
    .espin-body {
        margin-top: 0.5rem !important;
        /* Reduced from 3rem */
        padding-top: 0 !important;
    }

    .espin-header {
        margin-bottom: 0 !important;
    }

    .espin-section:first-child {
        margin-top: 0 !important;
    }
}

/* =========================================
   Reduce Desktop Header-Image Gap
   ========================================= */
.espin-body {
    margin-top: 0.5rem !important;
    /* Global reduction (Desktop + Mobile) */
    padding-top: 0 !important;
}

.espin-header {
    margin-bottom: 0 !important;
}

/* =========================================
   Nearby Layout Update (Desktop 4 Columns)
   ========================================= */
.nearby-list {
    grid-template-columns: repeat(4, 1fr) !important;
    /* 4 Columns Desktop */
}

/* Maintain 1 Column for Mobile */
@media (max-width: 768px) {
    .nearby-list {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   Features Icon Color Update (Green)
   ========================================= */
.espin-feature-item i {
    color: #28a745 !important;
    /* Green color override */
}

/* =========================================
   Floor Plan Lightbox (Popup)
   ========================================= */
.lightbox-overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    transition: transform 0.3s ease;
    cursor: zoom-in;
    border-radius: 4px;
}

.lightbox-content.zoomed {
    transform: scale(2);
    cursor: zoom-out;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: #e60000;
}

/* Mobile Adjustments for Lightbox */
@media (max-width: 768px) {
    .lightbox-close {
        top: 10px;
        right: 15px;
        font-size: 30px;
    }
}

/* =========================================
   Share Icons Update (Round & Single Row)
   ========================================= */
.share-buttons {
    display: flex !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
    /* Force single line */
    justify-content: flex-start;
}

.share-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 45px !important;
    /* Fixed width */
    height: 45px !important;
    /* Fixed height */
    border-radius: 50% !important;
    /* Make it round */
    text-decoration: none;
    color: #fff;
    font-size: 1.2rem;
    transition: transform 0.2s;
}

.share-btn:hover {
    transform: scale(1.1);
}

/* Specific Colors (re-applying if needed) */
.fb {
    background: #3b5998;
}

.tw {
    background: #1da1f2;
}

.ln {
    background: #0077b5;
}

.wa {
    background: #25d366;
}

/* =========================================
   Share Icons Red Theme Update
   ========================================= */
.share-btn.red-theme {
    background: #e60000 !important;
    /* Uniform Red Color */
    color: #fff !important;
    border: none;
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem;
    margin: 0 0.2rem;
    /* Small gap between icons */
}

.share-btn.red-theme:hover {
    background: #cc0000 !important;
    transform: translateY(-2px);
}

/* =========================================
   Share Icons Shape & Mobile Fix
   ========================================= */
.share-buttons {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    /* Allow scroll if needed on tiny screens */
    padding-bottom: 5px;
    /* Space for scrollbar if any */
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Hide scrollbar for cleaner look */
.share-buttons::-webkit-scrollbar {
    display: none;
}

.share-buttons {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.share-btn.red-theme {
    flex-shrink: 0 !important;
    /* Prevent squashing into oval */
    min-width: 40px !important;
    /* Force width */
    min-height: 40px !important;
    /* Force height */
    line-height: 40px !important;
    /* Vertically center icon */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 4px !important;
}

/* Mobile specific tweaks to ensure fit */
@media (max-width: 400px) {
    .share-btn.red-theme {
        width: 35px !important;
        /* Slightly smaller on very small screens */
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
        line-height: 35px !important;
        font-size: 1rem !important;
    }

    .espin-section.share-section {
        gap: 0.5rem !important;
    }
}

/* =========================================
   Tighten Share Icons Gap
   ========================================= */
.share-buttons {
    gap: 4px !important;
    /* Very tight gap */
    padding-left: 0 !important;
}

.share-btn.red-theme {
    margin: 0 !important;
    /* Remove margins, rely on gap */
}

/* =========================================
   Homepage Updates (Cards Centered & Clickable)
   ========================================= */
.sector-card {
    cursor: pointer;
    /* Clickable cursor */
    display: flex;
    flex-direction: column;
}

.card-content {
    text-align: center !important;
    /* Center text and button */
    padding: 1rem !important;
    /* Reduced padding (was 2rem) */
}

/* Ensure button is centered and has proper spacing */
.card-content .btn {
    display: inline-block;
    margin-top: 0.5rem;
}

/* =========================================
   Premium Footer Styles
   ========================================= */
.site-footer {
    background-color: #1a1a1a;
    color: #b0b0b0;
    padding-top: 2rem;
    /* Reduced from 4rem */
    font-size: 0.95rem;
    margin-top: auto;
    /* Push to bottom */
}

.footer-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    /* Brand col is wider */
    gap: 3rem;
    padding-bottom: 0.5rem;
    /* Reduced from 3rem to remove gap */
}

.footer-col h3 {
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    /* Compact margin */
    font-weight: 700;
}

.footer-logo {
    font-size: 1.8rem !important;
    margin-bottom: 0.8rem !important;
    /* Compact */
}

.footer-desc {
    margin-bottom: 1.2rem;
    line-height: 1.6;
    max-width: 350px;
}

/* Social Icons */
.footer-socials {
    display: flex;
    gap: 0.8rem;
    /* Compact gap */
}

.footer-socials a {
    width: 36px;
    height: 36px;
    background: #e60000;
    /* RED background by default */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    background: #ffffff;
    /* White on hover */
    color: #e60000;
    /* Red text on hover */
    transform: translateY(-3px);
}

/* Links List */
.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 0.6rem;
    /* Compact spacing */
}

.footer-col ul li a {
    color: #b0b0b0;
    transition: color 0.3s, padding-left 0.3s;
    display: inline-block;
}

.footer-col ul li a:hover {
    color: #e60000;
    padding-left: 5px;
}

/* Contact List */
.contact-list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.contact-list li i {
    color: #e60000;
    margin-top: 4px;
    width: 25px;
    /* Fixed width for alignment */
    text-align: center;
    flex-shrink: 0;
    /* Prevent icon shrinking */
}

/* Footer Bottom */
.footer-bottom {
    background-color: #111;
    padding: 1rem 0;
    /* Reduced padding */
    border-top: 1px solid #333;
}

.bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.footer-bottom p {
    margin: 0 !important;
    /* Remove paragraph margin */
}

.footer-legal a {
    color: #888;
    margin-left: 1.5rem;
    font-size: 0.85rem;
}

.footer-legal a:hover {
    color: #fff;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .site-footer {
        padding-top: 1.5rem;
        /* Further reduced on mobile */
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        /* Reduced gap between columns */
        padding-bottom: 1.5rem;
        /* Reduced bottom padding */
        text-align: center;
    }

    .footer-desc {
        margin: 0 auto 1rem;
    }

    .footer-socials {
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    .contact-list li {
        justify-content: center;
        margin-bottom: 0.4rem;
    }

    .bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .footer-bottom {
        padding: 0.8rem 0;
    }

    .footer-legal a {
        margin: 0 0.5rem;
    }
}

/* =========================================
   IT Landing Page Styles
   ========================================= */

/* Hero Section - Sliding Banner */
.it-hero {
    position: relative;
    height: 600px;
    overflow: hidden;
    margin-top: 0;
}

.hero-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 80%;
    /* Width increased to 80% */
    z-index: 10;
    color: #fff;
}

.hero-content h1 {
    font-size: 2.5rem;
    /* Ensure white text */
    color: #fff;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.2rem;
    max-width: 80%;
    /* Width increased to 80% */
    margin: 0 auto 2rem;
    color: #e0e0e0;
}

/* About Section */
.it-about {
    padding: 5rem 0;
    /* padding-left/right 0 */
    text-align: center;
    background-color: #fff;
}

.it-about h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.it-about p {
    max-width: 800px;
    margin: 0 auto;
    color: #666;
    font-size: 1.1rem;
}

/* Service Grid (Icon Cards) */
.it-services {
    padding: 4rem 0;
    /* padding-left/right 0 */
    background-color: #f8f9fa;
}

.it-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Fixed 3 columns */
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
}

.it-card {
    background: #fff;
    padding: 0;
    /* Remove padding to let image flush */
    border-radius: 8px;
    text-align: left;
    /* Align text left like DMS cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    /* Remove underline from anchor */
    color: inherit;
    /* Inherit text color */
    cursor: pointer;
}

.it-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.it-card-img {
    height: 200px;
    /* Specific height for image area */
    background-size: cover;
    background-position: center;
    background-color: #eee;
}

.it-card-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.it-card h3 {
    font-size: 1.35rem;
    margin-bottom: 0.8rem;
    color: var(--color-primary);
    /* Primary Colored Title */
}

.it-card p {
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    flex-grow: 1;
    /* Push button to bottom */
}

/* Button override for card if needed */
.it-card .btn {
    align-self: flex-start;
}

.it-card .read-more {
    color: var(--color-primary);
    font-weight: 700;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    transition: gap 0.3s ease;
}

.it-card:hover .read-more {
    gap: 0.8rem;
    /* Slide arrow on hover */
}

/* Trust Section */
.it-trust {
    padding: 4rem 0;
    /* padding side 0 */
    background-color: #fff;
    text-align: center;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Fixed 4 columns */
    gap: 2rem;
    width: 100%;
    margin: 3rem auto 0;
}

.trust-item h3 {
    margin-bottom: 0.5rem;
    color: #333;
}

.trust-item p {
    color: #666;
    font-size: 0.95rem;
}

.trust-icon {
    width: 60px;
    height: 60px;
    background: #ffebee;
    /* Light Red bg */
    color: #e60000;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1rem;
}

@media (max-width: 768px) {
    .trust-grid {
        grid-template-columns: 1fr;
    }

    .it-hero h1 {
        font-size: 1.8rem;
    }
}

/* Industries Section */
.it-industries {
    padding: 4rem 0;
    /* padding side 0 */
    background-color: #fff;
    text-align: center;
}

.it-industries p {
    margin: 0 auto 1rem;
    color: #666;
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Changed from 4 to 5 */
    gap: 1.5rem;
    width: 100%;
    margin: 3rem auto 0;
}

.industry-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.industry-card:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: #e60000;
    transform: translateY(-5px);
}

.industry-icon {
    font-size: 2rem;
    color: #444;
    margin-bottom: 0.8rem;
    transition: color 0.3s ease;
}

.industry-card:hover .industry-icon {
    color: #e60000;
}

/* Process Section - Circular Flow */
.it-process {
    padding: 5rem 1rem;
    background-color: #fff;
    /* White bg as per image */
    text-align: center;
    overflow: hidden;
    /* For arrow positioning */
}

.it-process h2 {
    color: #008CBA;
    font-size: 2rem;
    margin-bottom: 4rem;
    text-transform: uppercase;
    font-weight: 700;
}

.process-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.process-step {
    position: relative;
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.step-circle {
    width: 180px;
    /* Increased from 140px */
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    /* Reduced from 1rem to fit text */
    text-align: center;
    padding: 1.2rem;
    /* Slightly more padding */
    margin-bottom: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    border: 4px solid #fff;
    overflow: hidden;
    /* Ensure text stays in */
    word-wrap: break-word;
    /* Wrap long words */
    line-height: 1.1;
    /* Tighter line height */
}

.process-step:hover .step-circle {
    transform: scale(1.05);
}


/* Connecting Arrows (Curved) */
.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    /* Adjusted for better alignment */
    right: -90px;
    /* Wider gap coverage */
    width: 100px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

/* Odd Arrows (1->2, 3->4): Curve UP (Yellow) */
.process-step:nth-child(odd)::after {
    top: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q 50 -20 100 50' stroke='%23FFC107' stroke-width='3' fill='none' marker-end='url(%23arrow-yellow)'/%3E%3Cdefs%3E%3Cmarker id='arrow-yellow' viewBox='0 0 10 10' refX='8' refY='5' markerWidth='6' markerHeight='6' orient='auto'%3E%3Cpath d='M0 0 L10 5 L0 10 z' fill='%23FFC107'/%3E%3C/marker%3E%3C/defs%3E%3C/svg%3E");
}

/* Even Arrows (2->3, 4->5): Curve DOWN (Blue) */
.process-step:nth-child(even)::after {
    top: 60px;
    /* Push down for bottom curve */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q 50 80 100 10' stroke='%23008CBA' stroke-width='3' fill='none' marker-end='url(%23arrow-blue)'/%3E%3Cdefs%3E%3Cmarker id='arrow-blue' viewBox='0 0 10 10' refX='8' refY='5' markerWidth='6' markerHeight='6' orient='auto'%3E%3Cpath d='M0 0 L10 5 L0 10 z' fill='%23008CBA'/%3E%3C/marker%3E%3C/defs%3E%3C/svg%3E");
}

@media (max-width: 968px) {
    .process-step:not(:last-child)::after {
        display: none;
        /* Hide arrows on mobile wrap */
    }

    .process-step {
        width: 100%;
        max-width: 300px;
        margin-bottom: 2rem;
    }
}

/* Tech Stack Section */
.it-tech {
    padding: 3rem 1rem;
    background-color: #f8f9fa;
    text-align: center;
}

.tech-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
    margin-top: 2rem;
    font-size: 3rem;
    color: #e60000;
    /* Brand red for all icons */
}

.tech-icons i {
    transition: transform 0.3s ease;
}

.tech-icons i:hover {
    transform: scale(1.1);
}

@media (max-width: 1200px) {
    .it-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .industry-grid,
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .it-service-grid,
    .industry-grid,
    .trust-grid {
        grid-template-columns: 1fr;
    }
}

/* Big CTA Section */
.it-cta {
    padding: 5rem 1rem;
    background: linear-gradient(rgba(230, 0, 0, 0.9), rgba(180, 0, 0, 0.9)), url('../images/tech_hero.png');
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #fff;
}

.it-cta h2 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: #fff;
}

.it-cta p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #f1f1f1;
}

.btn-white {
    background-color: #fff;
    color: #e60000;
    padding: 0.8rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-white:hover {
    background-color: #f1f1f1;
    color: #b30000;
    transform: translateY(-2px);
}

/* Highlights Section */
.it-highlights {
    padding: 4rem 1rem;
    background-color: #1a1a1a;
    color: #fff;
    text-align: center;
}

.highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
    max-width: 1400px;
    /* Limit width for aesthetics */
}

.highlight-card {
    background: #000;
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid #333;
    transition: transform 0.3s;
}

.highlight-card:hover {
    transform: translateY(-5px);
    border-color: #e60000;
}

.highlight-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: #e60000;
    margin-bottom: 0.5rem;
}

.highlight-text {
    font-size: 1.2rem;
    color: #ccc;
    font-weight: 500;
}

/* Clients Section - Auto-Sliding Marquee */
.it-clients {
    padding: 4rem 0;
    text-align: center;
    background-color: #f8f9fa;
    overflow: hidden;
}

.client-marquee {
    margin-top: 3rem;
    overflow: hidden;
}

.marquee-row {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: flex;
    gap: 2rem;
    animation: scrollLeft 30s linear infinite;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.333%);
    }
}

.client-logo {
    flex-shrink: 0;
    width: 180px;
    height: 120px;
    background: #fff;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.client-logo img {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    filter: grayscale(0%);
    transition: all 0.3s;
}

.client-logo:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* Stronger shadow on hover */
    transform: translateY(-5px);
}

.client-logo:hover img {
    opacity: 1;
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .highlight-grid {
        grid-template-columns: 1fr;
    }
}

/* International Partners */
.it-partners {
    padding: 4rem 0;
    background-color: #fff;
    text-align: center;
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Back to 4 columns */
    gap: 2rem;
    /* Increased gap slightly */
    width: 100%;
    margin: 3rem auto 0;
}

.partner-grid .client-logo {
    height: 200px;
    /* Even larger height */
    width: 100%;
    padding: 1rem;
}

/* Testimonials */
.it-testimonials {
    padding: 5rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    text-align: center;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    width: 100%;
    margin: 3rem auto 0;
}

.testimonial-card {
    background: #fff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    text-align: left;
    position: relative;
    border-left: 4px solid #e60000;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(230, 0, 0, 0.15);
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 5rem;
    color: #ffe6e6;
    font-family: Georgia, serif;
    line-height: 1;
    z-index: 0;
}

.testimonial-quote {
    font-size: 1.15rem;
    font-style: italic;
    color: #444;
    margin-bottom: 2rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f0f0;
}

.testimonial-author-info h4 {
    margin-bottom: 0.3rem;
    color: #222;
    font-size: 1.1rem;
    font-weight: 700;
}

.testimonial-author-info span {
    font-size: 0.95rem;
    color: #e60000;
    font-weight: 500;
}

/* Resources */
.it-resources {
    padding: 4rem 1rem;
    background-color: #1a1a1a;
    color: #fff;
    text-align: center;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 3rem auto 0;
}

.resource-card {
    background: #333;
    padding: 2rem;
    border-radius: 8px;
    transition: transform 0.3s;
    text-align: left;
}

.resource-card:hover {
    transform: translateY(-5px);
    background: #444;
}

.resource-type {
    font-size: 0.85rem;
    color: #e60000;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: block;
}

.resource-card h3 {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 1rem;
}

.resource-link {
    color: #fff;
    text-decoration: underline;
    font-size: 0.95rem;
}

@media (max-width: 768px) {

    .partner-grid,
    .testimonial-grid,
    .resource-grid {
        grid-template-columns: 1fr;
    }
}

/* Global Call To Action Section (Shared with Developer Page) */
.cta-section {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    padding: 4rem 0;
    text-align: center;
    margin-top: 4rem;
    /* Only top margin */
    margin-bottom: 0;
    /* Remove bottom margin to touch footer */
}

.cta-content h2 {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-content p {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.cta-btn {
    background: white;
    color: var(--color-primary);
    padding: 0.8rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s;
}

.cta-btn:hover {
    background: var(--color-light-gray);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-outline:hover {
    background: white;
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* About Section Split Layout */
.it-about {
    background-color: #fff;
    padding: 5rem 1rem;
    text-align: left;
    /* Reset center align */
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h2 {
    font-size: 2.5rem;
    color: #222;
    margin-bottom: 1.5rem;
}

.about-text p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
}

/* Embedded Highlights (Right Column) */
.about-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2x2 grid looks better for side column */
    gap: 1rem;
    /* Reduced gap */
}

.highlight-card {
    background: #fff;
    /* White background requested */
    padding: 0.8rem;
    /* Further reduced padding */
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    text-align: center;
    transition: transform 0.3s;
}

.highlight-card:hover {
    transform: translateY(-5px);
    border-color: #e60000;
}

.highlight-number {
    font-size: 1.8rem;
    /* Adjusted for smaller card */
    font-weight: 800;
    color: #e60000;
    margin-bottom: 0.2rem;
}

.highlight-text {
    font-size: 0.9rem;
    /* Reduced from 1rem */
    color: #444;
    /* Darker text for visibility on white */
    font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 968px) {
    .about-container {
        grid-template-columns: 1fr;
        text-align: center;
        /* Changed back to center */
    }

    .about-text {
        width: 95%;
        /* 95% width */
        max-width: 95%;
        margin: 0 auto;
        /* Centered container but left aligned text if inside is block */
    }

    .about-highlights {
        grid-template-columns: repeat(2, 1fr);
        /* Keep 2 cols on tablet */
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {

    /* Hero Adjustments for Mobile */
    .it-hero {
        height: 500px;
        /* Reduced height from 600px */
    }

    .hero-content {
        width: 90%;
        max-width: 90%;
        /* Display 90% width */
        padding-top: 3rem;
        /* Padding above text */
        padding-bottom: 2rem;
        /* Space below button reserved */
    }

    .hero-content h1 {
        font-size: 1.8rem;
        /* Reduced font size */
        line-height: 1.3;
    }

    .hero-content p {
        font-size: 0.9rem;
        /* Further reduced to 0.9rem */
        max-width: 100%;
        margin-bottom: 1.5rem;
        line-height: 1.6;
        /* Match standard line-height */
    }

    .about-highlights {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    /* Section Title Adjustments */
    .container h2,
    .it-services h2,
    .it-industries h2,
    .it-tech h2,
    .it-trust h2,
    .it-clients h2,
    .it-partners h2,
    .it-testimonials h2,
    .cta-content h2 {
        font-size: 1.5rem;
        /* Further reduced title size */
        max-width: 90%;
        /* 90% width constraint */
        margin-left: auto;
        margin-right: auto;
        line-height: 1.3;
        /* Standard vertical gap */
        margin-bottom: 1.5rem;
    }

    /* General Paragraph Spacing */
    p {
        line-height: 1.6;
        /* Standard readable line height */
        margin-bottom: 1rem;
    }

    .industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Force equal width prevent overflow */
        gap: 0.5rem;
        /* Reduced gap for better 50% feel */
    }

    .industry-card {
        aspect-ratio: 1 / 1;
        /* Make cards square */
        height: 100%;
        /* Fill grid cell height */
        width: 100%;
        /* Fill grid cell width */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    /* Client Marquee Adjustments for Mobile (Show ~3 logos) */
    .marquee-content {
        gap: 1rem;
        /* Reduce gap */
    }

    .client-logo {
        width: 100px;
        /* Smaller width for mobile */
        height: 70px;
        border-radius: 4px;
        /* Slightly smaller radius */
    }

    /* Fix Technology Section Scrollbar */
    .it-tech {
        overflow: hidden;
        /* Disable any internal scrollbars */
        height: auto;
        width: 100%;
    }

    /* International Partners Mobile Grid */
    .partner-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on mobile */
        gap: 1rem;
    }
}