/* Global Settings */
:root {
    --primary-color: #000000;
    --secondary-color: #e22028;
    --text-color: #666666;
    --heading-color: #1A1A1A;
    --light-bg: #F4F7FA;
    --white: #ffffff;
    --border-color: #e5e5e5;
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
    text-transform: uppercase;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.btn {
    display: inline-block;
    padding: 14px 30px;
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background-color: var(--secondary-color);
    color: var(--white);
    border-color: var(--secondary-color);
}

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

.btn-outline {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
}

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

.section-tag {
    display: block;
    color: var(--secondary-color);
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-size: 14px;
}

/* Header */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.top-bar {
    background-color: var(--primary-color);
    color: #cccccc;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-info span {
    margin-right: 20px;
}

.top-info i {
    color: var(--secondary-color);
    margin-right: 5px;
}

.top-socials a {
    color: #cccccc;
    margin-left: 15px;
    font-size: 14px;
}

.top-socials a:hover {
    color: var(--secondary-color);
}

.main-header {
    background-color: transparent;
    padding: 20px 0;
    transition: var(--transition);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
}

.logo-icon {
    font-size: 32px;
    color: var(--secondary-color);
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
}

.main-nav ul {
    display: flex;
    gap: 30px;
}

.main-nav a {
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 5px;
}

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

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: var(--transition);
}

/* Dropdown Styles */
.main-nav li {
    position: relative;
}

.main-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 0;
    border-top: 3px solid var(--secondary-color);
    border-radius: 0 0 4px 4px;
}

.main-nav li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav .dropdown-menu li {
    display: block;
    width: 100%;
}

.main-nav .dropdown-menu a {
    display: block;
    padding: 14px 25px;
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.main-nav .dropdown-menu a::after {
    display: none;
}

.main-nav .dropdown-menu a:hover {
    background-color: #f8f9fa;
    color: var(--secondary-color);
    padding-left: 30px;
}

.main-nav .dropdown-menu li:last-child a {
    border-bottom: none;
}

.header-action {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
}

/* Footer Redesign */
.site-footer {
    background-color: #031018;
    /* Darker Navy */
    background-image: linear-gradient(0deg, rgba(3, 16, 24, 0.95), rgba(3, 16, 24, 0.95)), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=2670&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    color: #aaaaaa;
    padding-top: 0;
    font-size: 15px;
    position: relative;
}

/* Newsletter Strip */
.footer-newsletter-strip {
    background-color: var(--secondary-color);
    padding: 40px 0;
    margin-bottom: 80px;
    position: relative;
    top: -40px;
    /* Overlap effect */
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.newsletter-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.newsletter-text {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--white);
}

.newsletter-text .icon {
    font-size: 40px;
    color: var(--primary-color);
}

.newsletter-text h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 24px;
}

.newsletter-text p {
    margin: 0;
    color: var(--primary-color);
    font-weight: 500;
}

.newsletter-form-flat {
    display: flex;
    flex: 1;
    max-width: 500px;
    background: var(--white);
    padding: 5px;
    border-radius: 5px;
}

.newsletter-form-flat input {
    flex: 1;
    border: none;
    padding: 10px 20px;
    outline: none;
    background: transparent;
}

.newsletter-form-flat button {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 10px 25px;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transition);
}

.newsletter-form-flat button:hover {
    background-color: #000;
}

/* Footer Content */
.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-widget h4 {
    color: var(--white);
    font-size: 20px;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}

.footer-widget h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--secondary-color);
}

/* Footer Links */
.footer-links li {
    margin-bottom: 15px;
    transition: var(--transition);
}

.footer-links li a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-links li i {
    font-size: 12px;
    color: var(--secondary-color);
    transition: var(--transition);
}

.footer-links li:hover {
    transform: translateX(5px);
}

.footer-links li:hover i {
    color: var(--white);
}

.footer-links li:hover a {
    color: var(--white);
}

/* Footer Bottom */
.footer-bottom {
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.bottom-links {
    display: flex;
    gap: 20px;
}

.bottom-links a {
    font-size: 14px;
    color: #888;
}

.bottom-links a:hover {
    color: var(--secondary-color);
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 850px;
    display: flex;
    align-items: center;
    background: url('../images/hero_banner.png') no-repeat center center/cover;
    background-attachment: fixed;
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(90deg, rgba(130, 13, 56, 0.9) 0%, rgba(130, 13, 56, 0.7) 100%); */
    background: transparent;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    max-width: 800px;
}

.sub-title {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 8px 16px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-left: 3px solid var(--secondary-color);
}

.hero-title {
    font-size: 75px;
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--white);
}

.highlight {
    -webkit-text-stroke: 2px var(--white);
    color: transparent;
}

.hero-desc {
    font-size: 18px;
    color: #e0e0e0;
    margin-bottom: 40px;
    max-width: 600px;
}

.hero-btns {
    display: flex;
    gap: 20px;
}

/* Features Section */
.features-section {
    position: relative;
    padding: 100px 0;
    margin-top: -100px;
    z-index: 10;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-card {
    background-color: var(--white);
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    border-bottom: 3px solid transparent;
}

.feature-card.highlight-card {
    background-color: var(--secondary-color);
    color: var(--white);
}

.feature-card.highlight-card p,
.feature-card.highlight-card h3,
.feature-card.highlight-card i {
    color: var(--white);
}

.feature-card.highlight-card .read-more {
    color: var(--white);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-bottom-color: var(--secondary-color);
}

.icon-box {
    font-size: 50px;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.feature-card p {
    margin-bottom: 25px;
    color: #666;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--primary-color);
}

.read-more i {
    transition: var(--transition);
}

.feature-card:hover .read-more i {
    margin-left: 5px;
}

/* Horizontal Service Card Style */
.services-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 30px;
}

.service-horizontal-card {
    display: grid;
    grid-template-columns: 2fr 3fr;
    /* 40% image, 60% content */
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    border: 1px solid #eee;
    height: 100%;
}

.service-horizontal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.service-horizontal-card .card-img-wrapper {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 250px;
}

.service-horizontal-card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.service-horizontal-card .card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-horizontal-card h3 {
    font-size: 22px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.service-horizontal-card h3 a {
    color: var(--heading-color);
    transition: var(--transition);
    text-decoration: none;
}

.service-horizontal-card h3 a:hover {
    color: var(--primary-color);
}

.service-horizontal-card h5.text-muted {
    font-size: 14px;
    margin-bottom: 15px;
    color: #888 !important;
}

.service-horizontal-card .desc {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-horizontal-card .btn-custom {
    align-self: flex-start;
    padding: 10px 20px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: var(--transition);
    text-decoration: none;
}

.service-horizontal-card .btn-custom:hover {
    background: var(--secondary-color);
    color: var(--white);
}

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

    .service-horizontal-card {
        grid-template-columns: 1fr;
        /* Stack vertically on mobile */
    }

    .service-horizontal-card .card-img-wrapper {
        height: 200px;
        /* Fixed height for mobile image */
    }
}

/* About Section */
.about-section {
    padding: 100px 0;
}

.about-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.img-wrapper {
    position: relative;
}

.placeholder-img {
    width: 100%;
    height: 500px;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #888;
    background: url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2670&auto=format&fit=crop') no-repeat center center/cover;
}

.experience-badge {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 40px;
    text-align: center;
}

.experience-badge .years {
    display: block;
    font-size: 50px;
    font-weight: 700;
    font-family: var(--font-heading);
    line-height: 1;
}

.experience-badge .text {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
}

.about-content h2 {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-weight: 500;
    color: var(--heading-color);
}

.check-list i {
    color: var(--secondary-color);
    font-size: 18px;
}

.about-content .btn {
    margin-top: 30px;
}

/* What We Offer Section */
.offer-section {
    position: relative;
    padding: 100px 0;
    min-height: 800px;
    display: flex;
    align-items: center;
    background: url('../images/services_bg.png') no-repeat center center/cover;
    background-attachment: fixed;
    color: var(--white);
    overflow: hidden;
}

.offer-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    /* Deep Blue Overlay */
    z-index: 1;
}

.offer-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.offer-left {
    flex: 0 0 35%;
}

.offer-left .section-tag {
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.offer-left h2 {
    color: var(--white);
    font-size: 48px;
    margin-bottom: 25px;
    line-height: 1.2;
}

.offer-left p {
    color: #d0d0d0;
    margin-bottom: 35px;
    font-size: 16px;
    line-height: 1.8;
}

.btn-yellow {
    background-color: var(--secondary-color);
    color: var(--white);
    font-weight: 700;
    border-radius: 5px;
}

.btn-yellow:hover {
    background-color: #fff;
    color: #000;
}

.offer-right {
    flex: 1;
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
}

.offer-item {
    transition: var(--transition);
}

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

.offer-icon {
    font-size: 45px;
    color: transparent;
    -webkit-text-stroke: 1px var(--secondary-color);
    margin-bottom: 20px;
    transition: var(--transition);
}

.offer-item:hover .offer-icon {
    color: var(--secondary-color);
    -webkit-text-stroke: 0px;
}

.offer-item h3 {
    color: var(--white);
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

.offer-item p {
    color: #aaa;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* Page Header */
.page-header {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    margin-bottom: 80px;
}

.page-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.page-header h1 {
    font-size: 60px;
    color: var(--white);
    margin-bottom: 20px;
}

.breadcrumb {
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.breadcrumb a {
    color: var(--white);
}

.breadcrumb i {
    margin: 0 10px;
    font-size: 12px;
    color: var(--secondary-color);
}

.breadcrumb span {
    color: var(--secondary-color);
}

/* Vision & Mission */
.vision-mission-section {
    padding: 100px 0;
    background-color: var(--light-bg);
}

.vm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.vm-card {
    background-color: var(--white);
    padding: 40px;
    text-align: center;
    transition: var(--transition);
    border-bottom: 3px solid transparent;
}

.vm-card:hover {
    transform: translateY(-5px);
    border-bottom-color: var(--secondary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.vm-icon {
    font-size: 50px;
    color: var(--secondary-color);
    margin-bottom: 25px;
}

.vm-content h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.vm-content p {
    color: #666;
    font-size: 15px;
}

/* CEO Message */
.ceo-message-section {
    padding: 100px 0;
}

.ceo-inner {
    display: flex;
    align-items: center;
    gap: 60px;
}

.ceo-quote-box {
    flex: 1;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 60px;
    position: relative;
}

.quote-icon {
    font-size: 60px;
    color: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 40px;
    left: 40px;
}

.ceo-quote-box blockquote {
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.ceo-details h4 {
    color: var(--secondary-color);
    margin-bottom: 5px;
    font-size: 20px;
}

.ceo-details span {
    color: #aaa;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ceo-image {
    flex: 0 0 400px;
}

.ceo-img-wrapper img {
    width: 100%;
    border-radius: 5px;
    box-shadow: 20px 20px 0 var(--secondary-color);
}

/* New Responsive Updates for About Page */
@media (max-width: 1024px) {
    .vm-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ceo-inner {
        flex-direction: column-reverse;
    }

    .ceo-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 500px;
    }
}

/* Services Page Styles */
.services-page-section {
    padding: 100px 0;
    background-color: var(--white);
}

.services-grid-large {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card-large {
    background-color: var(--light-bg);
    padding: 40px;
    border: 1px solid #eee;
    transition: var(--transition);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
}

.service-card-large:hover {
    transform: translateY(-5px);
    background-color: var(--white);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.svc-icon {
    font-size: 50px;
    color: var(--secondary-color);
    margin-bottom: 25px;
}

.svc-content h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.svc-content p {
    color: #666;
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 1.7;
    flex-grow: 1;
}

.btn-link {
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 1px;
}

.btn-link i {
    margin-left: 5px;
    transition: var(--transition);
}

.service-card-large:hover .btn-link i {
    margin-left: 10px;
    color: var(--secondary-color);
}

/* Responsive Update for Services Page */
@media (max-width: 1024px) {
    .services-grid-large {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Footer Contact Widget */
.contact-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.contact-list i {
    flex: 0 0 35px;
    height: 35px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    /* Icon itself */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-list .info span {
    display: block;
    font-size: 13px;
    color: var(--secondary-color);
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

.contact-list .info p,
.contact-list .info a {
    color: #aaa;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    transition: var(--transition);
}

.contact-list .info a:hover {
    color: var(--white);
}

/* Projects Page Styles */
.projects-page-section {
    padding: 100px 0;
    background-color: var(--white);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.project-card {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    height: 400px;
}

.project-img {
    height: 100%;
    width: 100%;
    position: relative;
}

.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover .project-img img {
    transform: scale(1.1);
}

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(126, 13, 57, 0.9) 0%, rgba(126, 13, 57, 0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    opacity: 0;
    transition: var(--transition);
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-info {
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.project-card:hover .project-info {
    transform: translateY(0);
}

.project-info .category {
    display: block;
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.project-info h3 {
    margin-bottom: 20px;
    line-height: 1.3;
}

.project-info h3 a {
    color: var(--white);
    font-size: 24px;
}

.project-info h3 a:hover {
    color: var(--secondary-color);
}

.project-info .details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--secondary-color);
    color: var(--white);
    border-radius: 50%;
    transition: var(--transition);
}

.project-info .details-btn:hover {
    background-color: var(--white);
    color: var(--secondary-color);
}

/* Stats Section */
.stats-section {
    padding: 80px 0;
    background-color: var(--primary-color);
    background-image: url('https://images.unsplash.com/photo-1487800940032-17a3ad32efdc?q=80&w=2669&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    color: var(--white);
    position: relative;
    z-index: 5;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.stat-item {
    padding: 20px;
}

.stat-number {
    font-size: 50px;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--secondary-color);
    margin-bottom: 10px;
    line-height: 1;
}

.stat-label {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Contact Page Styles */
.contact-page-section {
    padding: 100px 0;
    background-color: var(--white);
}

.contact-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
}

.contact-info-side .section-tag {
    margin-bottom: 10px;
}

.contact-info-side h2 {
    font-size: 42px;
    margin-bottom: 20px;
}

.contact-info-side p {
    color: #666;
    margin-bottom: 40px;
    line-height: 1.7;
}

.cd-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.cd-item .icon {
    flex: 0 0 60px;
    height: 60px;
    background-color: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--secondary-color);
    border-radius: 5px;
    transition: var(--transition);
}

.cd-item:hover .icon {
    background-color: var(--secondary-color);
    color: var(--white);
}

.cd-item .content h4 {
    font-size: 20px;
    margin-bottom: 5px;
}

.cd-item .content p {
    margin: 0;
    font-size: 15px;
    color: #777;
}

.contact-socials h4 {
    font-size: 18px;
    margin-bottom: 15px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background-color: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--heading-color);
    border-radius: 5px;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: var(--secondary-color);
    color: var(--white);
}

/* Contact Form */
.contact-form-side {
    background-color: var(--light-bg);
    padding: 50px;
    border-radius: 5px;
}

.main-contact-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.main-contact-form .form-group {
    flex: 1;
    width: 100%;
    margin-bottom: 20px;
}

.main-contact-form input,
.main-contact-form textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #ddd;
    background-color: var(--white);
    border-radius: 4px;
    outline: none;
    font-family: var(--font-body);
    font-size: 15px;
    transition: var(--transition);
}

.main-contact-form input:focus,
.main-contact-form textarea:focus {
    border-color: var(--secondary-color);
}

.map-section {
    height: 500px;
    position: relative;
    background-color: #eee;
}

.map-container {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-pin {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 15px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-20px);
    }

    60% {
        transform: translateY(-10px);
    }
}


/* Responsive Update for Contact */
@media (max-width: 1024px) {
    .contact-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Service Detail List (Carousel Redesign) */
.service-detail-list-section {
    padding: 100px 0;
    background-color: var(--light-bg);
    overflow: hidden;
}

.sdl-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 30px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.sdl-carousel::-webkit-scrollbar {
    display: none;
}

.sdl-card {
    flex: 0 0 300px;
    /* Fixed width for standard cards */
    height: 400px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    scroll-snap-align: center;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Text at bottom */
    transition: transform 0.3s ease;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.sdl-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Card Variants (Alternating Colors) */
.sdl-card.card-red {
    background-image: linear-gradient(0deg, rgba(126, 13, 57, 0.95) 0%, rgba(126, 13, 57, 0.8) 100%), url('../images/card_bg_red.png');
}

.sdl-card.card-orange {
    background-image: linear-gradient(0deg, rgba(244, 151, 47, 0.95) 0%, rgba(244, 151, 47, 0.8) 100%), url('../images/card_bg_orange.png');
}

.sdl-card-icon {
    font-size: 40px;
    color: var(--white);
    margin-bottom: auto;
    /* Pushes text to bottom */
}

.sdl-card h3 {
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
}

.sdl-card p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.sdl-card:hover p {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure background covers */
.sdl-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Responsive Update for Projects */
@media (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Responsive */
@media (max-width: 1024px) {

    .features-grid,
    .stats-grid,
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }

    .offer-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .offer-left {
        flex: 0 0 100%;
        margin-bottom: 50px;
        max-width: 600px;
    }

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

    .hero-title {
        font-size: 50px;
    }

    .about-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .main-nav,
    .header-action .btn {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }

    .features-grid,
    .stats-grid,
    .footer-top {
        grid-template-columns: 1fr;
    }

    .offer-grid {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 40px;
    }

    .feature-card {
        margin-top: 0;
    }

    .features-section {
        margin-top: 0;
        padding-top: 50px;
    }
}

/* Logo Image */
.header-logo {
    height: 45px;
    width: auto;
    display: block;
}

/* Responsive Top Bar */
@media (max-width: 768px) {
    .top-bar-inner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .top-info {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: center;
    }

    .top-info span {
        margin-right: 0;
    }

    .top-socials {
        justify-content: center;
    }
}

/* --- Header Redesign to Match Reference --- */

/* Top Bar Styling */
.top-bar {
    background-color: var(--primary-color);
    /* User requested theme primary color instead of blue */
    color: #ffffff;
    border-bottom: none;
}

.top-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-left: 5px;
    border-radius: 3px;
    transition: var(--transition);
}

.top-socials a:hover {
    background-color: var(--secondary-color);
}

/* Main Header Styling */
.site-header {
    position: relative;
    /* Not absolute over hero anymore, per reference look */
    background-color: var(--white);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.main-header {
    background-color: var(--white);
    padding: 15px 0;
}

/* Logo */
.header-logo {
    height: 50px;
}

/* Navigation - Dark Text for White Header */
.main-nav a {
    color: var(--heading-color);
    font-weight: 700;
    font-size: 15px;
}

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

.main-nav a::after {
    background-color: var(--secondary-color);
}

/* Header Contact Info Block */
.header-contact-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-contact-info .icon-box {
    width: 50px;
    height: 50px;
    background-color: var(--secondary-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 3px;
    margin-bottom: 0;
    /* Resetting global icon-box margin */
}

.header-contact-info .text-box {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-contact-info .label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--heading-color);
    letter-spacing: 0.5px;
}

.header-contact-info .number {
    font-size: 16px;
    font-weight: 400;
    color: #666;
}

/* Hero Section Updates */
.hero-section {
    align-items: center;
    justify-content: center;
    /* Center horizontally */
    text-align: center;
    /* Center text */
    margin-top: 0;
}

.hero-content {
    margin: 0 auto;
    max-width: 900px;
}

/* Hero Buttons */
.hero-btns {
    justify-content: center;
}

/* Responsive Fixes */
@media (max-width: 991px) {
    .header-contact-info {
        display: none;
    }
}

/* --- Hero Slider & Animation (Zoom & Fade) --- */

/* Reset Hero Section Background */
.hero-section {
    background: none;
    /* Remove static background */
    overflow: hidden;
    /* contain zoomed images */
    position: relative;
    /* height is already defined as 850px in main css */
}

/* Remove colored overlay as requested */
.hero-bg-overlay {
    display: none !important;
}

/* Slider Container */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Behind content which is z-index 2 */
}

/* Slide Item */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1);
    animation: zoomFade 15s infinite linear;
}

/* Stagger Animations for 3 Slides (Total 15s cycle) */
.slide:nth-child(1) {
    animation-delay: 0s;
}

.slide:nth-child(2) {
    animation-delay: 5s;
}

.slide:nth-child(3) {
    animation-delay: 10s;
}

/* 
 Animation Logic:
 Each slide is active for ~33% of the time (5s out of 15s).
 It fades in, zooms slightly, and fades out.
 Using overlaps for smooth crossfade.
*/
@keyframes zoomFade {
    0% {
        opacity: 0;
        transform: scale(1);
        z-index: 1;
    }

    5% {
        opacity: 1;
        z-index: 2;
        /* Bring to front */
    }

    33% {
        opacity: 1;
        transform: scale(1.15);
        /* Zoom effect */
        z-index: 2;
    }

    40% {
        opacity: 0;
        /* Fade out */
        z-index: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.15);
        /* Keep scale constant after hidden to avoid jump */
    }
}

/* Ensure text is readable without the heavy overlay */
/* We add a very slight dark gradient just to the text container or rely on text shadow */
.hero-content {
    /* text-shadow: 0 2px 10px rgba(0,0,0,0.7); */
    /* Alternatively, add a subtle backdrop to the hero-content container itself if needed, but user asked to remove "the color overlay" */
    z-index: 10;
}

/* --- Updated Slider Logic for 5 Slides & Dark Overlay --- */

/* Restore Overlay as a small dark tint */
.hero-bg-overlay {
    display: none !important;
}

/* Update Animation Timing for 5 Slides */
/* Total Cycle: 25s (5s per slide) */
.slide {
    animation-duration: 25s;
}

/* Stagger Delays for 5 slides */
.slide:nth-child(1) {
    animation-delay: 0s;
}

.slide:nth-child(2) {
    animation-delay: 5s;
}

.slide:nth-child(3) {
    animation-delay: 10s;
}

.slide:nth-child(4) {
    animation-delay: 15s;
}

.slide:nth-child(5) {
    animation-delay: 20s;
}

/* 
 Updated Keyframes for 5 slides (1/5 = 20%)
 0% -> Start Fade In
 4% -> Fully Visible (1s)
 20% -> Start Fade Out (5s hold/zoom)
 24% -> Fully Hidden (overlap)
*/
@keyframes zoomFade {
    0% {
        opacity: 0;
        transform: scale(1);
        z-index: 1;
    }

    4% {
        opacity: 1;
        z-index: 2;
    }

    20% {
        opacity: 1;
        transform: scale(1.15);
        z-index: 2;
    }

    24% {
        opacity: 0;
        z-index: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.15);
    }
}

/* --- About Section Redesign (3-Column Grid) --- */

.about-section-redesign {
    padding: 100px 0;
    background-color: var(--white);
}

.about-grid-redesign {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 30px;
    align-items: stretch;
}

/* Column 1: Text Content */
.about-col-text {
    padding-right: 20px;
}

.about-col-text .section-tag {
    color: var(--secondary-color);
    margin-bottom: 10px;
    display: block;
    font-weight: 600;
}

.about-col-text h2 {
    font-size: 42px;
    line-height: 1.1;
    color: var(--heading-color);
    margin-bottom: 25px;
}

.divider-line {
    width: 60px;
    height: 4px;
    background-color: var(--secondary-color);
    margin-bottom: 25px;
}

.about-desc {
    color: #666;
    margin-bottom: 35px;
    font-size: 16px;
    line-height: 1.6;
}

/* History Block with Experience Badge */
.history-block {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
}

.exp-badge-simple {
    text-align: center;
    min-width: 100px;
}

.exp-badge-simple .icon-top {
    font-size: 40px;
    color: var(--secondary-color);
    margin-bottom: 5px;
    display: block;
    -webkit-text-stroke: 1px var(--secondary-color);
    color: transparent;
}

.exp-badge-simple .num {
    display: block;
    font-size: 48px;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1;
    font-family: var(--font-heading);
}

.exp-badge-simple .num .plus {
    color: var(--secondary-color);
    font-size: 24px;
    vertical-align: top;
}

.exp-badge-simple .label {
    font-size: 13px;
    color: #888;
}

.history-text h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.history-text p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Column 2: Feature Boxes */
.about-col-features {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.feature-box-small {
    padding: 40px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-box-small .icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.feature-box-small h3 {
    font-size: 22px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.feature-box-small p {
    margin-bottom: 25px;
    line-height: 1.6;
}

.arrow-link {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Light Box Variant */
.light-box {
    background-color: var(--light-bg);
}

.light-box .icon {
    color: var(--secondary-color);
    -webkit-text-stroke: 1px var(--secondary-color);
    color: transparent;
}

.light-box h3 {
    color: var(--heading-color);
}

.light-box p {
    color: #666;
}

.light-box .arrow-link {
    color: var(--secondary-color);
}

/* Primary Color Box Variant (Dark in reference, Primary requested) */
.primary-box {
    background-color: var(--primary-color);
    color: var(--white);
}

.primary-box .icon {
    color: transparent;
    -webkit-text-stroke: 1px var(--secondary-color);
}

.primary-box h3 {
    color: var(--white);
}

.primary-box p {
    color: rgba(255, 255, 255, 0.8);
}

.primary-box .arrow-link {
    color: var(--secondary-color);
}

.primary-box .arrow-link:hover {
    color: var(--white);
}

/* Column 3: Tall Image */
.about-col-image {
    position: relative;
    height: 100%;
    min-height: 500px;
}

.about-image-tall {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.video-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background-color: var(--secondary-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: var(--transition);
}

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


/* Responsive */
@media (max-width: 1024px) {
    .about-grid-redesign {
        grid-template-columns: 1fr;
    }

    .about-col-text {
        padding-right: 0;
    }

    .about-col-features {
        flex-direction: row;
    }

    .about-col-image {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .about-col-features {
        flex-direction: column;
    }
}

/* --- Product Card Styling for Consumables Section --- */

.sdl-card.product-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    min-height: 480px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

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

/* Clear old background images styles if any conflict */
.sdl-card.product-card::before {
    display: none;
}

.product-img-wrapper {
    width: 100%;
    height: 250px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.product-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.sdl-card.product-card:hover .product-img-wrapper img {
    transform: scale(1.1);
}

.product-content {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-content h3 {
    font-size: 18px;
    color: var(--heading-color);
    margin-bottom: 15px;
    font-weight: 700;
}

.product-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    opacity: 1;
    /* Override slide effect */
    transform: none;
    /* Override slide effect */
    line-height: 1.6;
}

.btn-link {
    margin-top: auto;
    display: inline-block;
    color: var(--secondary-color);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

.btn-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Ensure slide text effect from previous CSS doesn't hide text */
.sdl-card.product-card:hover p {
    opacity: 1;
    transform: none;
}

/* --- Products Page Styling --- */

.products-page-section {
    background-color: var(--white);
}

.product-row {
    display: flex;
    gap: 50px;
    align-items: center;
    margin-bottom: 60px;
}

.product-row:last-child {
    margin-bottom: 0;
}

/* Alternate direction for variety (optional, but requested simple list first, let's keep it consistent left-image first for readability based on screenshot layout) */
/*
.product-row:nth-child(even) {
    flex-direction: row-reverse;
}
*/

.prod-image {
    flex: 0 0 40%;
    border: 5px solid var(--primary-color);
    /* Match style in screenshot border */
    padding: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.prod-image img {
    width: 100%;
    height: auto;
    display: block;
}

.prod-info {
    flex: 1;
}

.prod-info h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 32px;
    text-transform: uppercase;
}

.prod-info p {
    margin-bottom: 20px;
    font-size: 16px;
    color: #444;
}

.prod-info h4 {
    color: var(--primary-color);
    margin: 25px 0 15px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
}

.prod-info .check-list li {
    margin-bottom: 8px;
    font-size: 15px;
}

.prod-info .check-list i {
    color: var(--heading-color);
    /* Use black/dark dots as per screenshot (or primary) - code uses heading-color usually */
    font-size: 14px;
}

.prod-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 60px 0;
}

/* Responsive */
@media (max-width: 991px) {
    .product-row {
        flex-direction: column;
        text-align: left;
    }

    .prod-image {
        width: 100%;
        max-width: 500px;
        margin-bottom: 30px;
    }
}

/* --- New Product Card Grid Layout --- */

.products-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.prod-card-large {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.prod-card-large:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.prod-img-box {
    width: 100%;
    height: 300px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.prod-img-box img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.prod-card-large:hover .prod-img-box img {
    transform: scale(1.08);
}

.prod-content-box {
    padding: 35px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.prod-content-box h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.prod-content-box .desc {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

.app-areas {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--secondary-color);
}

.app-areas h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.app-areas ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 15px;
}

.app-areas ul li {
    font-size: 13px;
    color: #666;
    position: relative;
    padding-left: 15px;
}

.app-areas ul li::before {
    content: "•";
    color: var(--secondary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 991px) {
    .products-grid-layout {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* --- Creative Products Section --- */

.creative-products-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f9f9f9 0%, #ececec 100%);
    position: relative;
    overflow: hidden;
}

/* Background Pattern Element */
.creative-products-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background-color: rgba(130, 13, 56, 0.03);
    /* Primary color very faint */
    border-radius: 50%;
    z-index: 0;
}

.creative-products-section .section-header {
    position: relative;
    z-index: 1;
    margin-bottom: 60px;
}

/* Horizontal Scroll Container */
.creative-carousel {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding: 20px 10px 60px 10px;
    /* Bottom padding for hover effects */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE */
    position: relative;
    z-index: 2;
}

.creative-carousel::-webkit-scrollbar {
    display: none;
}

/* Creative Card */
.creative-card {
    flex: 0 0 350px;
    /* Fixed width */
    height: 450px;
    background: #fff;
    border-radius: 20px;
    position: relative;
    scroll-snap-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.creative-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 20px 50px rgba(130, 13, 56, 0.15);
    /* Primary shadow */
}

/* Image Area */
.cc-image {
    width: 100%;
    height: 60%;
    background-color: #f4f4f4;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cc-image img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.creative-card:hover .cc-image img {
    transform: scale(1.15) rotate(-3deg);
}

/* Content Area */
.cc-content {
    padding: 25px;
    position: relative;
    background: #fff;
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
}

/* Floating Badge */
.cc-badge {
    position: absolute;
    top: -20px;
    right: 20px;
    background: var(--secondary-color);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 5px 15px rgba(249, 151, 59, 0.4);
    transition: transform 0.3s ease;
}

.creative-card:hover .cc-badge {
    transform: rotate(90deg);
}

.cc-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 10px;
    line-height: 1.3;
}

.cc-content p {
    font-size: 14px;
    color: #888;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cc-link {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--primary-color);
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.cc-link i {
    transition: margin-left 0.3s ease;
}

.creative-card:hover .cc-link i {
    margin-left: 5px;
}

/* Decoration line */
.cc-content::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--primary-color);
    transition: width 0.4s ease;
}

.creative-card:hover .cc-content::before {
    width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .creative-card {
        flex: 0 0 280px;
        height: 400px;
    }
}

/* --- Fast Carousel (Marquee) Animation --- */

/* Parent Container */
.creative-carousel {
    display: flex;
    overflow: hidden;
    /* Hide scrollbar */
    padding: 20px 0 60px 0;
    position: relative;
    width: 100%;
}

/* Track for infinite scrolling */
.carousel-track {
    display: flex;
    gap: 30px;
    width: max-content;
    /* Allow content to stretch */
    animation: scroll-marquee 40s linear infinite;
    /* Adjust speed here (40s is decent for this amount of content) */
}

/* Pause animation on hover */
.carousel-track:hover {
    animation-play-state: paused;
}

/* Animation Keyframes */
@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Move half way because content is duplicated. 
           If original width is W and gap is G, and there are N items:
           Total width = 2 * (N * (card_width + gap)) - gap (roughly)
           We need to shift by exactly (N * (card_width + gap)) / TotalWidth%
           OR easier: translateX(-50%) of the TRACK if duplicate and original are equal length.
           Let's try -50% approx, but better to calculate or use N items.
           Since we have 1 set + 1 duplicate set equal size, -50% works perfectly if width corresponds to full track.
           Actually current track contains 2 sets. So 0 to -50% creates seamless loop.
         */
        transform: translateX(calc(-50% - 15px));
        /* -50% of total track width minus half gap to be precise */
    }
}

/* Ensure cards maintain size */
.creative-card {
    flex: 0 0 320px;
    /* Slightly narrower for 'fast' feel */
    scroll-snap-align: unset;
    /* Remove snap */
}

/* Initial fade in */
.creative-products-section {
    opacity: 0;
    animation: fadeInSection 1s ease forwards;
}

@keyframes fadeInSection {
    to {
        opacity: 1;
    }
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .carousel-track {
        animation-duration: 30s;
        /* Faster on mobile */
    }

    .creative-card {
        flex: 0 0 280px;
    }
}

/* --- Global Smooth Scroll & Animations --- */

/* 1. Smooth Anchor Scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    /* Offset for fixed header */
}

/* 2. Scroll Reveal Animation Classes */
.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
    will-change: opacity, transform;
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delay for child elements if needed later */
.reveal-delay-100 {
    transition-delay: 0.1s;
}

.reveal-delay-200 {
    transition-delay: 0.2s;
}

/* Existing Sections & Elements to animate automatically (can be targeted in JS, but good to have base styles ready) */
section,
footer,
.page-header {
    /* We will add .reveal-up class via JS to existing sections to avoid bulk HTML editing, 
       but we can also force it here if we want everything to be hidden by default. 
       Better to do it in JS to ensure clean fallback if JS fails. */
}

/* --- News Page & Section Styles --- */

.news-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.news-item-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.news-item-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.news-thumb {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-item-card:hover .news-thumb img {
    transform: scale(1.1);
}

.news-date {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--primary-color);
    color: #fff;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 700;
}

.news-details {
    padding: 25px;
}

.news-cat {
    color: var(--secondary-color);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.news-details h3 {
    font-size: 20px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.news-details h3 a {
    color: var(--heading-color);
    transition: color 0.3s ease;
}

.news-details h3 a:hover {
    color: var(--primary-color);
}

.news-details p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.read-more i {
    transition: margin-left 0.3s ease;
}

.read-more:hover i {
    margin-left: 5px;
}

/* Pagination */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.pagination {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.pagination li a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    color: var(--heading-color);
    border-radius: 5px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.pagination li a.active,
.pagination li a:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Responsive */
@media (max-width: 991px) {
    .news-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* --- CSS Hero Slider Styles --- */

.hero-section {
    position: relative;
    height: 850px;
    background: none !important;
    /* Override static bg */
    overflow: hidden;
}

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

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    animation: slideFade 15s infinite;
    /* 3 slides * 5s each */
}

/* Stagger animations for infinite loop */
.slide-item:nth-child(1) {
    animation-delay: 0s;
}

.slide-item:nth-child(2) {
    animation-delay: 5s;
}

.slide-item:nth-child(3) {
    animation-delay: 10s;
}

@keyframes slideFade {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    /* Stay visible for 1/3 of cycle */
    38% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* Hero Content Transition Logic - we need to duplicate content or use JS. 
   For simplicity without JS, we can put content INSIDE slide-item */

.slide-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: transparent;
}

.slide-content-inner {
    max-width: 900px;
    padding: 0 15px;
    margin-left: max(5%, calc((100% - 1320px) / 2));
    /* Container offset simulation */
    color: var(--white);
}

.slide-content-inner .sub-title {
    animation: slideUp 1s ease forwards;
    opacity: 0;
    animation-delay: 0.5s;
}

.slide-content-inner h1 {
    font-size: 75px;
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--white);
    animation: slideUp 1s ease forwards;
    opacity: 0;
    animation-delay: 0.7s;
}

.slide-content-inner p {
    font-size: 18px;
    color: #e0e0e0;
    margin-bottom: 40px;
    max-width: 600px;
    animation: slideUp 1s ease forwards;
    opacity: 0;
    animation-delay: 0.9s;
}

.slide-content-inner .hero-btns {
    animation: slideUp 1s ease forwards;
    opacity: 0;
    animation-delay: 1.1s;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 991px) {
    .slide-content-inner h1 {
        font-size: 48px;
    }

    .hero-section {
        height: 600px;
    }
}