/* ==========================================================================
   Archio Theme - Custom Design & Layout Overrides
   Pixel-perfect design matching archiodesigns.com
   ========================================================================== */

/* --------------------------------------------------------------------------
   00. Base Document & Page Resets
   -------------------------------------------------------------------------- */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    color: #18130c;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
    box-sizing: inherit !important;
}

#page, 
.site,
.content-wrapper, 
.main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    background-color: #ffffff !important;
}

.container {
    width: 100% !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
}
@media (min-width: 576px) { .container { max-width: 540px !important; } }
@media (min-width: 768px) { .container { max-width: 720px !important; } }
@media (min-width: 992px) { .container { max-width: 960px !important; } }
@media (min-width: 1200px) { .container { max-width: 1140px !important; } }
@media (min-width: 1400px) { .container { max-width: 1320px !important; } }

/* --------------------------------------------------------------------------
   01. Header & Navigation (matches Screenshot 2)
   -------------------------------------------------------------------------- */
.site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 200 !important;
    background: transparent !important;
}

.site-header.is-sticky, 
.site-header.is-pinned {
    position: fixed !important;
    background: #18130c !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4) !important;
}

.header__bar {
    padding: 0 3.75rem !important;
    height: 5.5rem !important;
}

@media (max-width: 991px) {
    .header__bar {
        padding: 0 1.5rem !important;
        height: 4.5rem !important;
    }
}

.header__logo img {
    max-height: 44px !important;
    width: auto !important;
}

.menu .nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2.2rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.menu .nav > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.menu .nav > li > a {
    color: #ffffff !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.menu .nav > li > a:hover {
    color: #b88768 !important;
}

.nav__submenu,
.sub-menu {
    display: none !important;
}

/* --------------------------------------------------------------------------
   02. Fullscreen Hero Slider Carousel
   -------------------------------------------------------------------------- */
.archio-hero-section {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 85vh !important;
    min-height: 550px !important;
    overflow: hidden !important;
    background-color: #18130c !important;
    display: block !important;
}

.archio-hero-slider {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.archio-hero-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s ease !important;
    pointer-events: none !important;
}

.archio-hero-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

.archio-hero-image-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.archio-hero-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

.archio-hero-image-wrap::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(24, 19, 12, 0.4) 0%, rgba(24, 19, 12, 0.1) 40%, rgba(24, 19, 12, 0.35) 100%) !important;
    z-index: 2 !important;
}

.archio-hero-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(24, 19, 12, 0.35) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.archio-hero-nav:hover {
    background: #b88768 !important;
    border-color: #b88768 !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.archio-hero-prev { left: 2rem !important; }
.archio-hero-next { right: 2rem !important; }

.archio-hero-dots {
    position: absolute !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    gap: 10px !important;
}

.archio-hero-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.archio-hero-dot.is-active {
    background: #b88768 !important;
    transform: scale(1.3) !important;
    width: 24px !important;
    border-radius: 10px !important;
}

/* --------------------------------------------------------------------------
   03. Projects Showcase Section
   -------------------------------------------------------------------------- */
.archio-projects-section {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
    background-color: #ffffff !important;
}

.sectionHeading__title {
    font-family: Cambria, "Times New Roman", serif !important;
    color: #4B3636 !important;
    font-size: 2.5rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2.5rem !important;
    text-align: center !important;
}

.archio-projects-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1199px) { .archio-projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 991px) { .archio-projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 16px !important; } }
@media (max-width: 575px) { .archio-projects-grid { grid-template-columns: 1fr !important; } }

.project-card {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    background: transparent !important;
    cursor: pointer !important;
}

.project-card__image-wrap {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 109.75% !important;
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 2px !important;
    background-color: #f5f5f5 !important;
}

.project-card__image-wrap img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.project-card:hover .project-card__image-wrap img { transform: scale(1.05) !important; }

.project-card__content {
    padding-top: 14px !important;
    display: flex !important;
    flex-direction: column !important;
}

.project-card__category {
    display: block !important;
    color: #b88768 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 4px !important;
}

.project-card__title {
    color: #18130c !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    transition: color 0.2s ease !important;
}

.project-card:hover .project-card__title { color: #b88768 !important; }

/* --------------------------------------------------------------------------
   04. Clients Carousel
   -------------------------------------------------------------------------- */
.archio-clients-section {
    padding-top: 3.5rem !important;
    padding-bottom: 5rem !important;
    background-color: #ffffff !important;
}

.archio-clients-title {
    font-family: "Roboto Condensed", "Work Sans", sans-serif !important;
    color: #271919 !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin-bottom: 2.5rem !important;
}

.client-marquee-wrapper {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 15px 0 !important;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent) !important;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent) !important;
}

.client-marquee-track {
    display: flex !important;
    align-items: center !important;
    width: max-content !important;
    animation: archioMarqueeSlide 30s linear infinite !important;
    will-change: transform !important;
}

.client-marquee-track:hover { animation-play-state: paused !important; }

.client-logo-item {
    flex: 0 0 auto !important;
    padding: 0 32px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 70px !important;
}

.client-logo-item img {
    max-height: 44px !important;
    max-width: 120px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: grayscale(100%) !important;
    opacity: 0.75 !important;
    transition: all 0.3s ease !important;
}

.client-logo-item img:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

@keyframes archioMarqueeSlide {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   05. Page Masthead & Inner Pages (Contact, About, Services, etc.)
   -------------------------------------------------------------------------- */
.page-masthead,
section.page-masthead,
.elementor-section.page-masthead {
    position: relative !important;
    padding-top: 160px !important;
    padding-bottom: 70px !important;
    background-color: #18130c !important;
    width: 100% !important;
    display: block !important;
    overflow: hidden !important;
}

.page-masthead__bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #18130c !important;
    z-index: 1 !important;
}

.page-masthead__content {
    position: relative !important;
    z-index: 2 !important;
}

.page-masthead__title,
.page-masthead h1,
.highlighted-heading__title.page-masthead__title {
    font-family: Cambria, "Times New Roman", serif !important;
    font-size: 2.75rem !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    text-transform: capitalize !important;
}

/* --------------------------------------------------------------------------
   06. Contact Page - Explicit Pixel-Perfect Layout (White BG & Dual Column)
   -------------------------------------------------------------------------- */
.layout-pt-lg,
.layout-pb-xl,
.contact-section-wrap,
section.elementor-section.layout-pt-lg {
    background-color: #ffffff !important;
    padding-top: 70px !important;
    padding-bottom: 90px !important;
    width: 100% !important;
    display: block !important;
}

/* Row Grid */
.elementor-container.row,
.contact-section-wrap .row,
.layout-pt-lg .row,
.row.no-gutters {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
    align-items: flex-start !important;
}

/* Left Map Column (60%) */
.col-xl-7, 
.col-lg-7,
.elementor-column.col-xl-7,
.elementor-column.col-lg-7 {
    flex: 0 0 58.333333% !important;
    max-width: 58.333333% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    box-sizing: border-box !important;
}

/* Right Details Column (40%) */
.col-xl-4,
.col-lg-4,
.elementor-column.col-xl-4,
.elementor-column.col-lg-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    box-sizing: border-box !important;
}

.offset-lg-1 {
    margin-left: 8.333333% !important;
}

.offset-lg-5 {
    margin-left: 41.666667% !important;
}

@media (max-width: 991px) {
    .col-xl-7, .col-lg-7,
    .col-xl-4, .col-lg-4,
    .elementor-column.col-xl-7,
    .elementor-column.col-lg-7,
    .elementor-column.col-xl-4,
    .elementor-column.col-lg-4,
    .offset-lg-1,
    .offset-lg-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* Google Map Container */
.elementor-widget-google_maps,
.elementor-custom-embed,
.map-container {
    width: 100% !important;
    min-height: 480px !important;
    height: 480px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    background-color: #e5e3df !important;
}

.elementor-widget-google_maps iframe,
.elementor-custom-embed iframe,
.map-container iframe {
    width: 100% !important;
    height: 480px !important;
    min-height: 480px !important;
    border: 0 !important;
    display: block !important;
}

/* Contact Details Typography */
.sectionHeading__subtitle,
.highlighted-heading__title.sectionHeading__subtitle {
    font-family: "Work Sans", sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #b88768 !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}

.sectionHeading__title,
.highlighted-heading__title.sectionHeading__title {
    font-family: Cambria, "Times New Roman", serif !important;
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: #18130c !important;
    line-height: 1.25 !important;
    margin-top: 4px !important;
    margin-bottom: 24px !important;
    text-align: left !important;
}

.elementor-widget-text-editor .text,
.contact-info-list p {
    font-size: 1rem !important;
    color: #333333 !important;
    line-height: 1.9 !important;
    margin-bottom: 8px !important;
}

.elementor-widget-text-editor .text a,
.contact-info-list a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Contact Form Card (Dark Box Container) */
.bg-dark,
.contact-form-card,
div.sectionHeading.bg-dark {
    background-color: #18130c !important;
    padding: 44px 48px !important;
    border-radius: 4px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25) !important;
    color: #ffffff !important;
    margin-top: 40px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    .bg-dark, .contact-form-card, div.sectionHeading.bg-dark {
        padding: 24px 20px !important;
    }
}

.bg-dark .sectionHeading__subtitle { color: #b88768 !important; }
.bg-dark .sectionHeading__title {
    color: #ffffff !important;
    font-size: 2rem !important;
    margin-bottom: 24px !important;
}

/* Form Fields */
.wpforms-form,
.theme-contact-form {
    width: 100% !important;
}

.wpforms-field-container,
.theme-contact-form .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.wpforms-field-label,
.theme-contact-form label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.wpforms-required-label { color: #b88768 !important; }

.wpforms-field-row {
    display: flex !important;
    gap: 16px !important;
}

.wpforms-field-row-block { flex: 1 !important; }
.wpforms-field-sublabel { display: none !important; }

/* Input Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
.wpforms-field input,
.wpforms-field textarea,
.form-control {
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    font-size: 0.9375rem !important;
    outline: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus,
.form-control:focus {
    border-color: #b88768 !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(184, 135, 104, 0.3) !important;
}

textarea,
.wpforms-field-textarea textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Submit Button */
button[type="submit"],
.wpforms-submit,
.btn-submit {
    background-color: #b88768 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 42px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    margin-top: 10px !important;
}

button[type="submit"]:hover,
.wpforms-submit:hover,
.btn-submit:hover {
    background-color: #a37254 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(184, 135, 104, 0.4) !important;
}

/* --------------------------------------------------------------------------
   07. Footer
   -------------------------------------------------------------------------- */
.footer,
.footer.-type-1 {
    background-color: #18130c !important;
    color: #a8a7a5 !important;
    padding: 2.5rem 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
}

.footer__bottom_text {
    font-size: 0.8125rem !important;
    color: #a8a7a5 !important;
}

.footer__logo img {
    max-height: 40px !important;
    width: auto !important;
}