/*
Theme Name: Viora Architecture
Theme URI: #
Author: Synavos
Description: Viora Architecture WordPress Theme
Version: 1.0
*/

/**
 * Viora Corporate - About Us Extracted Component Stylesheet
 * -------------------------------------------------------------
 * Contains styles, variables, typography, and layout rules for:
 * 1. Theme Variables & Fonts
 * 2. Section About (Hero & Statistics Counters)
 * 3. Section Video & Text Marquee
 * 4. Section Why (Feature Icon Boxes)
 * 5. Section Overview (Mission, Vision & Testimonial)
 * 6. Section Service (Service Cards Grid)
 * 7. Section Resume (Awards & Milestones Timeline)
 * 8. Section Team (Leadership Team Cards)
 * 9. Partner Logos Marquee
 * 10. Buttons & Progress Scroll
 */

/* ============================================================
   1. Theme Variables & Fonts
   ============================================================ */
:root {
    --Primary: #94F3B4;
    --Secondary: #154040;
    --White: #FFFFFF;
    --Black: #0D0D0D;
    --Surface: #F4F6F6;
    --On-Surface-1: #5E6D6D;
    --Line: rgba(21, 64, 64, 0.12);
    --Line-2: rgba(255, 255, 255, 0.15);

    --font-main: "Inter", sans-serif;
    --font-main2: "Red Hat Display", sans-serif;
    --font-main3: "Manrope", sans-serif;
    --font-main4: "Rethink Sans", sans-serif;
    --font-main5: "IBM Plex Sans", sans-serif;
    --font-main6: "Urbanist", sans-serif;
}

.font-2 { font-family: var(--font-main2); }
.font-3 { font-family: var(--font-main3); }
.font-4 { font-family: var(--font-main4); }
.font-5 { font-family: var(--font-main5); }
.font-6 { font-family: var(--font-main6); }

/* Spacing Utilities */
.tf-spacing-1 {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media (max-width: 991px) {
    .tf-spacing-1 {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* ============================================================
   2. Section About (Hero & Stats Grid)
   ============================================================ */
.section-about .box-about {
    position: relative;
}

.section-about .counter-item {
    border-radius: 16px;
    padding: 36px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.section-about .counter-item.bg-1 {
    background-color: var(--Surface);
}

.section-about .counter-item.bg-2 {
    background-color: var(--Primary);
}

.section-about .counter-item.bg-3 {
    background-color: var(--Secondary);
}

.section-about .img-style img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* ============================================================
   3. Section Video & Infinite Text Marquee
   ============================================================ */
.section-video {
    position: relative;
    overflow: hidden;
}

.section-video .widget-video {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    max-height: 600px;
}

.section-video .widget-video .image-inner {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.section-video .popup-youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: var(--Primary);
    color: var(--Secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 5;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.section-video .popup-youtube:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: var(--White);
}

.wrap-infiniteslide {
    overflow: hidden;
    padding: 40px 0;
    background-color: transparent;
}

.wrap-infiniteslide .infiniteslide {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.wrap-infiniteslide .marquee-item {
    display: inline-flex;
    align-items: center;
    margin: 0 24px;
}

.wrap-infiniteslide .marquee-item h3 {
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.wrap-infiniteslide .marquee-item .icon {
    font-size: 28px;
    color: var(--Primary);
    display: flex;
    align-items: center;
}

/* ============================================================
   4. Section Why (Why Choose Us)
   ============================================================ */
.section-why.v2 {
    background-color: #FAFCFC;
}

.section-why .thumbs img {
    border-radius: 20px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.section-why .wrap-box-icon {
    display: grid;
    gap: 24px;
    margin-bottom: 36px;
}

.tf-box-icon.style-1 {
    padding: 24px;
    background-color: var(--White);
    border-radius: 12px;
    border: 1px solid var(--Line);
    transition: all 0.3s ease;
}

.tf-box-icon.style-1:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.tf-box-icon.style-1 .box {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.tf-box-icon.style-1 .icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: rgba(148, 243, 180, 0.2);
    color: var(--Secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* ============================================================
   5. Section Overview (Mission, Vision & Testimonial)
   ============================================================ */
.section-overview .wrap-box {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 24px;
}

@media (max-width: 991px) {
    .section-overview .wrap-box {
        grid-template-columns: 1fr;
    }
}

.section-overview .col-content {
    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.section-overview .col-content.about {
    background-color: var(--Secondary);
}

.section-overview .col-content.mission {
    background-color: var(--Primary);
    color: var(--Secondary);
}

.section-overview .col-content.vision {
    position: relative;
    color: var(--White);
    background-color: var(--Black);
}

.section-overview .col-content.vision .thumbs img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.section-overview .col-content.vision .content {
    position: relative;
    z-index: 2;
}

/* ============================================================
   6. Section Service
   ============================================================ */
.tf-box-icon.style-2 {
    border-top: 1px solid var(--Line);
    padding: 32px 16px 20px;
    transition: all 0.3s ease;
}

.tf-box-icon.style-2:hover {
    background-color: var(--Surface);
    border-radius: 12px;
}

.tf-box-icon.style-2 .icon {
    font-size: 36px;
    color: var(--Secondary);
    margin-bottom: 20px;
}

/* ============================================================
   7. Section Resume (Awards & Milestones)
   ============================================================ */
.section-resume {
    background-color: var(--Secondary);
    color: var(--White);
}

.section-resume .thumbs img {
    border-radius: 20px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.wrap-resume-item {
    position: relative;
    padding-left: 28px;
    padding-bottom: 28px;
    border-left: 1px solid var(--Line-2);
}

.wrap-resume-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.wrap-resume-item .point {
    position: absolute;
    left: -5px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--Primary);
}

.resume-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* ============================================================
   8. Section Team
   ============================================================ */
.card-team.style-1 {
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--Secondary);
}

.card-team.style-1 .img-style {
    position: relative;
    overflow: hidden;
}

.card-team.style-1 .img-style img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.card-team.style-1:hover .img-style img {
    transform: scale(1.05);
}

.card-team.style-1 .tf-social {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

.card-team.style-1:hover .tf-social {
    opacity: 1;
    transform: translateX(0);
}

.card-team.style-1 .tf-social li a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--White);
    color: var(--Secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.card-team.style-1 .tf-social li a:hover {
    background-color: var(--Primary);
}

.card-team.style-1 .info {
    padding: 20px 24px;
}

/* ============================================================
   9. Partner Logos Marquee
   ============================================================ */
.wrap-partner {
    border-top: 1px solid var(--Line);
    border-bottom: 1px solid var(--Line);
    padding: 30px 0;
}

.wrap-partner .marquee-item img {
    height: 40px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.wrap-partner .marquee-item img:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* ============================================================
   10. Buttons & Progress Scroll
   ============================================================ */
.tf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    background-color: var(--Primary);
    color: var(--Secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.tf-btn.btn-bg-white {
    background-color: var(--White);
    color: var(--Secondary);
}

.tf-btn:hover {
    background-color: var(--Secondary);
    color: var(--White);
}

.tf-btn.btn-bg-white:hover {
    background-color: var(--Secondary);
    color: var(--White);
}






/* ============================================================
   1. Spacing Utilities
   ============================================================ */
.tf-spacing-1 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.tf-spacing-6 {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 991px) {
    .tf-spacing-1 {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .tf-spacing-6 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/* ============================================================
   2. Section Service & Stacked Items
   ============================================================ */
.heading-section.style-2 .heading {
    margin-bottom: 24px;
}

.heading-section.style-2 .bot {
    padding-top: 20px;
    border-top: 1px solid var(--Line);
}

.heading-section.style-2 .bot img {
    border-radius: 12px;
}

.stack-element {
    position: relative;
}

.stack-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.service-item.style-default {
    background-color: var(--Surface);
    border-radius: 24px;
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.service-item.style-default.ctl {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 991px) {
    .service-item.style-default,
    .service-item.style-default.ctl {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 24px;
    }
}

.service-item .img-style {
    display: block;
    border-radius: 16px;
    overflow: hidden;
}

.service-item .img-style img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-item:hover .img-style img {
    transform: scale(1.04);
}

.service-item .content .title {
    color: var(--Secondary);
    text-decoration: none;
    display: inline-block;
    font-weight: 700;
}

.service-item .content .title:hover {
    color: var(--Primary);
}

.service-item .list {
    list-style: none;
    padding: 0;
    margin: 24px 0 32px 0;
    display: grid;
    gap: 14px;
}

.service-item .list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--Text-primary);
    font-size: 15px;
}

.service-item .list li i {
    color: var(--Secondary);
    background-color: var(--Primary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.service-item .btn_link {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--Secondary);
    color: var(--White);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.service-item .btn_link:hover {
    background-color: var(--Primary);
    color: var(--Secondary);
    transform: scale(1.1);
}

/* ============================================================
   3. Section Pricing
   ============================================================ */
.section-pricing {
    background-color: #FAFCFC;
}

.tab-slide .menu-tab {
    background-color: var(--Surface);
    border-radius: 50px;
    padding: 6px;
    list-style: none;
    position: relative;
    border: 1px solid var(--Line);
}

.tab-slide .nav-tab-item {
    position: relative;
    z-index: 2;
}

.tab-slide .tab-link {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    color: var(--Text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.tab-slide .tab-link.active {
    background-color: var(--Secondary);
    color: var(--White);
}

.pricing-item.style-1 {
    background-color: var(--White);
    border-radius: 20px;
    padding: 40px 32px;
    border: 1px solid var(--Line);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pricing-item.style-1:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--Primary);
}

.pricing-item.style-1 .tag {
    background-color: var(--Primary);
    color: var(--Secondary);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
}

.pricing-item.style-1 .price {
    font-size: 44px;
    font-weight: 700;
    color: var(--Secondary);
}

.pricing-item.style-1 .list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.pricing-item.style-1 .list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--Text-primary);
}

.pricing-item.style-1 .list li i {
    color: var(--Secondary);
    font-size: 14px;
}

/* ============================================================
   4. Section CTA
   ============================================================ */
.section-cta-5 {
    background-color: var(--Secondary);
    border-radius: 28px;
    color: var(--White);
    padding: 60px 48px;
    overflow: hidden;
    position: relative;
}

.section-cta-5 .content-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

@media (max-width: 991px) {
    .section-cta-5 {
        padding: 40px 24px;
    }
    .section-cta-5 .content-inner {
        grid-template-columns: 1fr;
    }
}

.section-cta-5 .heading h2 {
    color: var(--White);
}

.section-cta-5 .trust .group {
    display: flex;
}

.section-cta-5 .trust .group img {
    border-radius: 50%;
    border: 2px solid var(--Secondary);
    margin-left: -12px;
}

.section-cta-5 .trust .group img:first-child {
    margin-left: 0;
}

.section-cta-5 .btn-bg-secondary {
    background-color: var(--Primary);
    color: var(--Secondary);
}

/* ============================================================
   5. Buttons & Partner Marquee
   ============================================================ */
.tf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    background-color: var(--Primary);
    color: var(--Secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.tf-btn.style-border {
    background-color: transparent;
    border: 1px solid var(--Secondary);
    color: var(--Secondary);
}

.tf-btn.style-border:hover {
    background-color: var(--Secondary);
    color: var(--White);
}

.tf-btn:hover {
    background-color: var(--Secondary);
    color: var(--White);
}

.wrap-partner {
    border-top: 1px solid var(--Line);
    border-bottom: 1px solid var(--Line);
    padding: 30px 0;
}

.wrap-partner .marquee-item img {
    height: 40px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.wrap-partner .marquee-item img:hover {
    filter: grayscale(0);
    opacity: 1;
}






/* About */
.section-about.tf-spacing-1 {
    padding-top: 200px !important;
}

/* Resources */
.section-service.tf-spacing-1 {
    padding-top: 200px !important;
}

/* Contact */
.team-purpose-showcase.tf-spacing-1 {
    padding-top: 200px !important;
}

/* Mobile */
@media (max-width: 991px) {
    .section-about.tf-spacing-1,
    .section-service.tf-spacing-1,
    .team-purpose-showcase.tf-spacing-1 {
        padding-top: 60px !important;
    }
}

.footer-style-18 .footer-content .text-caption-1 {
    width: 100% !important;
    text-align: center !important;
}