/* Home Page Styles - Centralized */

/* Welcome Section */
.welcome-section {
    background: #fff;
    padding: 80px 0;
}

/* Unified image styling - rounded corners, light grey border, subtle shadow */
.welcome-image-wrapper,
.why-htech-image {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 8px solid #e8e8e8;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.welcome-image,
.why-htech-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}

.welcome-content {
    padding-left: 30px;
}

.welcome-small-title {
    font-size: 40px;
    color: #000000;
    font-weight: 700;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.welcome-main-title {
    font-size: 48px;
    font-weight: 700;
    color: #00a651;
    margin-bottom: 20px;
    line-height: 1.2;
}

.welcome-text {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    text-align: justify;
}
.welcome-text p { margin-bottom: 1em; }
.welcome-text p:last-child { margin-bottom: 0; }
.welcome-text ul, .welcome-text ol { margin: 0.5em 0 1em 1.5em; }
.welcome-text li { margin-bottom: 0.3em; }
.welcome-text img { max-width: 100%; height: auto; border-radius: 8px; }

/* WHY Section - H-TECH style */
.why-htech-section {
    background: #00a651;
    padding: 80px 0;
}
.why-htech-title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    line-height: 1.2;
}
.why-htech-title span { font-weight: 700; }
.why-htech-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}
.why-htech-bullets li {
    color: #fff;
    font-size: 16px;
    line-height: 2;
    padding-left: 20px;
    position: relative;
}
.why-htech-bullets li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #fff;
}
.why-htech-placeholder {
    min-height: 300px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 60px;
}

/* Base carousel buttons (for Our Clients etc.) */
.htech-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 166, 81, 0.2);
    border: none;
    color: #00a651;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.htech-carousel-btn:hover {
    background: #00a651;
    color: #fff;
}
.htech-carousel-btn.prev-btn { left: -60px; }
.htech-carousel-btn.next-btn { right: -60px; }

/* Our Clients Section - Carousel */
.our-clients-section { background: #fff; padding: 80px 0; }
.our-clients-carousel-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.our-clients-carousel { overflow: hidden; }
.our-clients-slide-container {
    display: flex;
    gap: 30px;
    transition: transform 0.5s ease;
}
.our-client-slide-item {
    flex: 0 0 calc((100% - 60px) / 6);
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}
.our-client-slide-item img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
}

/* Associated Brands - Chessboard style (alternating white/light grey) */
.associated-brands-section { background: #fff; padding: 80px 0; }
.associated-brands-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}
.associated-brand-item {
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
}
.associated-brand-item:nth-child(12n+1),
.associated-brand-item:nth-child(12n+3),
.associated-brand-item:nth-child(12n+5),
.associated-brand-item:nth-child(12n+8),
.associated-brand-item:nth-child(12n+10),
.associated-brand-item:nth-child(12n+12) { background: #fff; }
.associated-brand-item:nth-child(12n+2),
.associated-brand-item:nth-child(12n+4),
.associated-brand-item:nth-child(12n+6),
.associated-brand-item:nth-child(12n+7),
.associated-brand-item:nth-child(12n+9),
.associated-brand-item:nth-child(12n+11) { background: #e8e8e8; }
.associated-brand-item img {
    max-width: 100%;
    max-height: auto;
    object-fit: contain;
}

/* Legacy - WHY EUCLID Section (hidden) */
.why-euclid-section {
    background: linear-gradient(135deg, #00a651 0%, #008c44 100%);
    position: relative;
    overflow: hidden;
}
.why-euclid-section.has-background-image {
    background: linear-gradient(135deg, rgba(32, 178, 170, 0.85) 0%, rgba(26, 155, 148, 0.85) 100%);
}
.why-euclid-section.has-background-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.3;
}
.why-euclid-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h100v100H0z" fill="none"/><path d="M10 10h80v80H10z" stroke="rgba(255,255,255,0.1)" stroke-width="1" fill="none"/></svg>');
    opacity: 0.3;
    background-size: 200px 200px;
    z-index: 1;
}
.why-euclid-section .container {
    position: relative;
    z-index: 1;
    padding: 80px 15px;
}
.why-euclid-images-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 20px;
    height: auto;
    min-height: 400px;
    max-height: 450px;
    align-items: center;
}
.why-image-item.why-image-full {
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100%;
}
.why-euclid-images-grid {
    grid-column: 2;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    height: 100%;
}
.why-image-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.why-image-item.why-image-full {
    height: 100%;
    max-height: 360px;
}
.why-image-item.why-image-top {
    grid-row: 1;
    height: 100%;
    max-height: 215px;
}
.why-image-item.why-image-bottom {
    grid-row: 2;
    height: 100%;
    max-height: 215px;
}
.why-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.why-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 250px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}
.why-image-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}
.why-euclid-text-content {
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.why-euclid-title {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    line-height: 1.2;
}
.why-euclid-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.8;
    text-align: justify;
}
.why-euclid-description p { margin-bottom: 1em; }
.why-euclid-description p:last-child { margin-bottom: 0; }
.why-euclid-description ul, .why-euclid-description ol { margin: 0.5em 0 1em 1.5em; }
.why-euclid-description li { margin-bottom: 0.3em; }
.why-euclid-description img { max-width: 100%; height: auto; border-radius: 8px; }

/* Industries Section */
.industries-section {
    background: #fff;
    padding: 80px 0;
}
.section-title {
    font-size: 42px;
    font-weight: 700;
    color: #00a651;
    margin-bottom: 0;
}
.section-subtitle {
    font-size: 18px;
    color: #666;
    margin-top: 10px;
}
.clients-section-subtitle {
    font-size: 16px;
    color: #666;
    margin-top: 10px;
}
.industries-image-wrapper {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 3px solid rgba(0, 166, 81, 0.2);
}
.industries-image {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}
.industries-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.industry-item {
    padding: 15px 25px;
    background: #f5f5f5;
    border-radius: 30px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.industry-item:hover {
    background: #e8f5e9;
    border-color: #00a651;
    transform: translateX(5px);
}
.industry-item.active {
    background: #00a651;
    color: #fff;
    border-color: #056BAB;
}

/* Our Services Section */
.our-services-section {
    background: #f8f9fa;
    padding: 80px 0;
}
.services-carousel-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.services-carousel {
    overflow: hidden;
    position: relative;
}
.services-slide-container {
    display: flex;
    transition: transform 0.5s ease;
}
.service-card-large {
    min-width: 100%;
    display: flex;
    gap: 30px;
    align-items: stretch;
}
.service-card-content {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #00a651;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.service-card-title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}
.service-card-summary {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    margin-bottom: 12px;
    font-weight: 400;
    max-height: 2.8em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.service-card-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.8;
    margin-bottom: 30px;
}
.service-learn-more-btn {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    width: fit-content;
}
.service-learn-more-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.service-card-image {
    flex: 1;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 33px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 8px solid #00000020;
    background: none !important;
}
.service-card-image img {
    width: 100%;
    background: none !important;
    height: 100%;
    min-height: 280px;
    object-fit: contain;
    object-position: center;
    border-radius: 23px;
}
.service-placeholder {
    width: 100%;
    height: 300px;
    background: #f0f0f0;
}
.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 166, 81, 0.2);
    border: none;
    color: #00a651;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-nav-btn:hover {
    background: #00a651;
    color: #fff;
}
.carousel-nav-btn.prev-btn {
    left: -60px;
}
.carousel-nav-btn.next-btn {
    right: -60px;
}

/* Clients Section */
.clients-area {
    background: #fff;
    padding: 80px 0;
}
.clients-section-title {
    font-size: 42px;
    font-weight: 400;
    color: #00a651;
    margin-bottom: 0;
}
.clients-section-title-bold {
    font-weight: 700;
}
.clients-carousel-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.clients-carousel {
    overflow: hidden;
    position: relative;
}
.clients-slide-container {
    display: flex;
    transition: transform 0.5s ease;
}
.client-slide-item {
    min-width: calc(100% / 5);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.client-slide-item img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}
.client-slide-item:hover img {
    filter: grayscale(0%);
}

/* Contact Form Section - reference: First/Last side-by-side, Work email, Message, blue button */
.contact-form-section {
    background: #f8f9fa;
    padding: 80px 0;
}
.contact-form-wrapper {
    max-width: 540px;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.contact-form-title {
    font-size: 24px;
    font-weight: 700;
    color: #212121;
    margin-bottom: 12px;
}
.contact-form-description {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 28px;
}
.contact-form-description p { margin-bottom: 1em; }
.contact-form-description p:last-child { margin-bottom: 0; }
.contact-form-description ul, .contact-form-description ol { margin: 0.5em 0 1em 1.5em; }
.contact-form-description li { margin-bottom: 0.3em; }
.contact-form-simple .form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
}
.contact-form .form-control {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 15px;
}
.contact-form .form-control:focus {
    border-color: #4A90E2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    outline: none;
}
.contact-form .row .col-md-6 .form-control { width: 100%; }
.contact-form textarea.form-control { min-height: 120px; resize: vertical; }
.contact-submit-btn {
    display: block;
    width: 100%;
    background: #4A90E2;
    color: #fff;
    padding: 14px 24px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.contact-submit-btn:hover {
    background: #3a7bc8;
    color: #fff;
}
.home-dynamic-fields {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}
.home-dynamic-fields .form-check {
    margin-right: 15px;
    margin-bottom: 10px;
}
.home-dynamic-fields .form-check-label {
    font-size: 14px;
}
.home-dynamic-fields small.text-muted {
    font-size: 13px;
    font-weight: 500;
    color: #666;
}
.contact-promo-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.contact-promo-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}
.contact-promo-placeholder {
    width: 100%;
    min-height: 300px;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    border-radius: 8px;
}
.contact-promo-placeholder i {
    font-size: 48px;
    margin-bottom: 10px;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .welcome-content {
        padding-left: 0;
        padding-top: 30px;
    }
    .welcome-main-title {
        font-size: 36px;
        color: #000000;
        font-weight: 700;
    }
    .why-euclid-title {
        font-size: 42px;
    }
    .why-euclid-images-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        min-height: auto;
        max-height: none;
    }
    .why-image-item.why-image-full {
        grid-column: 1;
        grid-row: 1;
        min-height: 250px;
        max-height: 300px;
    }
    .why-image-item.why-image-top,
    .why-image-item.why-image-bottom {
        max-height: 200px;
    }
    .why-euclid-images-grid {
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
    .why-image-item.why-image-top {
        grid-column: 1;
        grid-row: 1;
    }
    .why-image-item.why-image-bottom {
        grid-column: 2;
        grid-row: 1;
    }
    .why-euclid-text-content {
        padding-left: 0;
        padding-top: 30px;
    }
    .service-card-large {
        flex-direction: column;
        gap: 20px;
    }
    .service-card-content {
        border-radius: 12px;
    }
    .service-card-image {
        max-width: 100%;
        border-radius: 12px;
    }
    .carousel-nav-btn.prev-btn {
        left: -20px;
    }
    .carousel-nav-btn.next-btn {
        right: -20px;
    }
    .contact-promo-image-wrapper {
        padding-left: 0;
        padding-top: 30px;
    }
}
@media (max-width: 992px) {
    .associated-brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .htech-carousel-btn.prev-btn { left: -20px; }
    .htech-carousel-btn.next-btn { right: -20px; }
}
@media (max-width: 768px) {
    .associated-brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .welcome-section,
    .why-euclid-content,
    .industries-section,
    .our-services-section,
    .clients-area,
    .contact-form-section {
        padding: 50px 0;
    }
    .welcome-main-title {
        font-size: 28px;
        color: #000000;
        font-weight: 700;
    }
    .why-euclid-title {
        font-size: 32px;
    }
    .section-title {
        font-size: 32px;
    }
    .service-card-content {
        padding: 30px;
    }
    .service-card-title {
        font-size: 32px;
    }
    .clients-section-title {
        font-size: 32px;
    }
    .contact-form-title {
        font-size: 28px;
    }
    .carousel-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .carousel-nav-btn.prev-btn {
        left: -20px;
    }
    .carousel-nav-btn.next-btn {
        right: -20px;
    }
    .client-slide-item {
        min-width: calc(100% / 3);
    }
    .htech-section-title { font-size: 32px; }
    .why-htech-title { font-size: 32px; }
}
@media (max-width: 576px) {
    .associated-brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop only */
@media (min-width: 992px) {
    .services-slide-container > .service-card-large:not(:first-child) {
        margin-left: -30px;
    }
}