/* Cloud Tart Custom Theme Colors */
/* Brand Colors: #0d1b2e #d6b9a8 #FFFFFF #d6b9a8 #b08d6b #e7d3c5 */

/* 
 * NOTE: This theme file intentionally overrides variables and styles from cloudtart-main.css.
 * Variables defined in :root here will take precedence over those in cloudtart-main.css 
 * if this file is loaded after cloudtart-main.css.
 * 
 * Key Overrides:
 * --primary, --secondary, --white, --black families are redefined to match Cloud Tart brand colors.
 */

:root {
    /* Primary Brand Colors — Navy + Gold luxury system */
    --primary: #d6b9a8;        /* Cloud Tart Gold */
    --secondary: #0d1b2e;      /* Cloud Tart Navy (deep) */
    --accent: #d6b9a8;         /* Cloud Tart Rose-Gold (warm accent) */
    --accent-dark: #b08d6b;    /* Cloud Tart Deep Rose-Gold */
    --accent-light: #e7d3c5;   /* Cloud Tart Light Gold */
    
    /* Override existing color variables with Cloud Tart brand colors */
    --black: #0d1b2e;
    --black-2: #0d1b2e;
    --black-3: #b08d6b;
    --black-4: #0d1b2e;
    --black-5: #22344e;
    --black-6: #182338;
    --black-7: #555555;
    --black-13: #666;
    --black-14: #0d1b2e;
    --black-15: #0d1b2e;
    
    /* White variations */
    --white: #FFFFFF;
    --white-2: #f8f8f8;
    --white-3: #f0f0f0;
    --white-4: #e7d3c5;
    --white-5: #fbfbfb;
    --white-6: #e7d3c5;
    --white-7: #d6b9a8;
    
    /* Gray variations using brand colors */
    --gray: #d6b9a8;
    --gray-2: #d6b9a8;
    --gray-3: #e7d3c5;
    --gray-4: #f6f6f6;
    --gray-5: #d6b9a8;
    --gray-6: #0d1b2e;
    --gray-7: #d6b9a8;
    --gray-8: #d6b9a8;
    --gray-9: #e7d3c5;
    --gray-10: #b08d6b;
    --gray-11: #e7d3c5;
    --gray-12: #0d1b2e;
    --gray-13: #d6b9a8;
    --gray-14: #e7d3c5;
    --gray-15: #d6b9a8;
    --gray-16: #b08d6b;
    --gray-17: #f7f7fc;
    --gray-18: #d6b9a8;
    --gray-20: #e7d3c5;
    --gray-21: #f2f2f8;
    --gray-22: #fcfcfe;
    --gray-23: #ececf3;
    --gray-24: #ececf4;
    --gray-25: #d6b9a8;
    
    /* Background colors */
    --bg-line: #0d1b2e;
    --d-gray: #b08d6b;
    --d-black: #0d1b2e;
    --d-black-2: #0d1b2e;
    --d-black-3: #0d1b2e;
    
    /* CloudTart specific variables */
    --ct-primary: #d6b9a8;
    --ct-white: #FFFFFF;
    --ct-accent: #d6b9a8;
}

/* Cloud Tart specific styling */
.cloudtart-primary {
    color: #d6b9a8 !important;
}

.cloudtart-secondary {
    color: #0d1b2e !important;
}

.cloudtart-accent {
    color: #d6b9a8 !important;
}

.cloudtart-accent-dark {
    color: #b08d6b !important;
}

.cloudtart-accent-light {
    color: #e7d3c5 !important;
}

.cloudtart-white {
    color: #FFFFFF !important;
}

/* Background colors */
.bg-cloudtart-primary {
    background-color: #d6b9a8 !important;
}

.bg-cloudtart-secondary {
    background-color: #0d1b2e !important;
}

.bg-cloudtart-accent {
    background-color: #d6b9a8 !important;
}

.bg-cloudtart-accent-dark {
    background-color: #b08d6b !important;
}

.bg-cloudtart-accent-light {
    background-color: #e7d3c5 !important;
}

.bg-cloudtart-white {
    background-color: #FFFFFF !important;
}

/* Button styling with Cloud Tart colors */
.btn-cloudtart-primary {
    background-color: #d6b9a8;
    border-color: #d6b9a8;
    color: #0d1b2e;
}

.btn-cloudtart-primary:hover {
    background-color: #e7d3c5;
    border-color: #e7d3c5;
    color: #0d1b2e;
}

.btn-cloudtart-secondary {
    background-color: #0d1b2e;
    border-color: #0d1b2e;
    color: #FFFFFF;
}

.btn-cloudtart-secondary:hover {
    background-color: #b08d6b;
    border-color: #b08d6b;
    color: #FFFFFF;
}

.btn-cloudtart-accent {
    background-color: #d6b9a8;
    border-color: #d6b9a8;
    color: #FFFFFF;
}

.btn-cloudtart-accent:hover {
    background-color: #b08d6b;
    border-color: #b08d6b;
    color: #FFFFFF;
}

/* Link styling */
a.cloudtart-link {
    color: #d6b9a8;
    transition: color 0.3s ease;
}

a.cloudtart-link:hover {
    color: #d6b9a8;
    text-decoration: none;
}

/* Header and navigation styling */
.header-cloudtart {
    background-color: #0d1b2e;
}

.nav-cloudtart a {
    color: #FFFFFF;
}

.nav-cloudtart a:hover {
    color: #d6b9a8;
}

/* Footer styling */
.footer-cloudtart {
    background-color: #0d1b2e;
    color: #FFFFFF;
}

.footer-cloudtart a {
    color: #d6b9a8;
}

.footer-cloudtart a:hover {
    color: #e7d3c5;
}

/* Section backgrounds */
.section-cloudtart-light {
    background-color: #f8f8f8;
}

.section-cloudtart-accent {
    background-color: #e7d3c5;
}

/* Portfolio Page Styles */
.portfolio__area {
    position: relative;
    overflow: hidden;
}

.portfolio__text {
    font-size: 120px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -2px;
    margin-bottom: 60px;
    opacity: 0.35;
    position: relative;
    text-align: center;
    z-index: 1;
    white-space: nowrap;
    padding-top: 100px;
}

.portfolio__list-1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    position: relative;
    z-index: 2;
    margin-top: 40px;
}

.portfolio__image {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    aspect-ratio: 16/9;
    background: #f4f5f7;
}

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

.portfolio__item:hover .portfolio__image img {
    transform: scale(1.05);
}

.portfolio__item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(13, 27, 46, 0.1);
}

.portfolio__item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(13, 27, 46, 0.2);
}

.portfolio__item img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.portfolio__item:hover img {
    transform: scale(1.1);
}

.portfolio__info {
    padding: 20px;
    text-align: center;
}

.portfolio__title {
    font-size: 18px;
    font-weight: 600;
    color: #0d1b2e;
    margin: 0;
}

.portfolio__btn {
    text-align: center;
    margin-top: 60px;
}

/* Portfolio Filter Styles */
.portfolio__filter {
    background: #0d1b2e;
    padding: 60px 0;
}

.portfolio__filter-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.portfolio__filter-btn {
    background: transparent;
    border: 2px solid #d6b9a8;
    color: #d6b9a8;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.portfolio__filter-btn:hover,
.portfolio__filter-btn.active {
    background: #d6b9a8;
    color: #0d1b2e;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(214, 185, 168, 0.3);
}

/* Portfolio Grid Styles */
/* Portfolio Grid Styles - فقط برای صفحه portfolio.html */
.page-portfolio .portfolio__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns for 1/4 section size per image */
    gap: 20px 20px; /* Reduced gap for closer spacing */
    margin-bottom: 0;
    transform: translateZ(0); /* Hardware acceleration */
    will-change: transform;
}

/* Portfolio Wrapper Styles - فقط برای صفحه portfolio.html */
.page-portfolio .portfolio__wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(13, 27, 46, 0.1);
    transition: all 0.4s ease;
}

.page-portfolio .portfolio__wrapper:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(13, 27, 46, 0.2);
}

/* Portfolio Thumb Styles - فقط برای صفحه portfolio.html */
.page-portfolio .portfolio__thumb {
    position: relative;
    overflow: hidden;
    height: 280px; /* 16:9 laptop monitor aspect ratio for 50% width */
}

.portfolio__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.4s ease;
}

.portfolio__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(13, 27, 46, 0.9), rgba(214, 185, 168, 0.9));
    opacity: 0;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio__wrapper:hover .portfolio__overlay {
    opacity: 1;
}

.portfolio__wrapper:hover .portfolio__thumb img {
    transform: scale(1.1);
}

.portfolio__content {
    text-align: center;
    color: #fff;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.portfolio__wrapper:hover .portfolio__content {
    transform: translateY(0);
}

.portfolio__content .portfolio__title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.portfolio__category {
    font-size: 16px;
    color: #d6b9a8;
    margin-bottom: 20px;
}

.portfolio__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #d6b9a8;
    color: #0d1b2e;
    border-radius: 50%;
    font-size: 18px;
    transition: all 0.3s ease;
}

.portfolio__link:hover {
    background: #e7d3c5;
    transform: scale(1.1);
}

/* Stats Section */

/* Stats Section */

/* Testimonials */
.testimonial__area {
    background: #0d1b2e;
    color: #fff;
}

.testimonial__item {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px 30px;
    border-radius: 15px;
    border: 1px solid rgba(214, 185, 168, 0.2);
    transition: all 0.4s ease;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.testimonial__item:hover {
    background: rgba(214, 185, 168, 0.1);
    transform: translateY(-5px);
}

.testimonial__rating {
    margin-bottom: 20px;
}

.testimonial__carousel .swiper-wrapper {
    align-items: stretch;
}

.testimonial__carousel .swiper-slide {
    height: auto;
    display: flex;
}

.testimonial__author {
    margin-top: auto;
}

.testimonial__rating i {
    color: #d6b9a8;
    margin-right: 5px;
}

.testimonial__text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
}

.testimonial__name {
    font-size: 18px;
    font-weight: 600;
    color: #d6b9a8;
    margin-bottom: 5px;
}

.testimonial__position {
    font-size: 14px;
    color: #ccc;
}

/* CTA Section Styles */
.cta__area {
    background: var(--ct-primary);
    position: relative;
    overflow: hidden;
}

.cta__area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(214, 185, 168, 0.1) 0%, rgba(214, 185, 168, 0.1) 100%);
    z-index: 1;
}

.cta__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 100px 0;
}

.cta__title {
    color: var(--ct-white);
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.cta__text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta__buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.cta__btn--primary {
    background: var(--ct-accent);
    color: var(--ct-primary);
    border-color: var(--ct-accent);
}

.cta__btn--primary:hover {
    background: transparent;
    color: var(--ct-accent);
    transform: translateY(-2px);
}

.cta__btn--secondary {
    background: transparent;
    color: var(--ct-white);
    border-color: var(--ct-white);
}

.cta__btn--secondary:hover {
    background: var(--ct-white);
    color: var(--ct-primary);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .cta__title {
        font-size: 2.5rem;
    }
    
    .cta__buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .cta__btn {
        width: 100%;
        justify-content: center;
    }
}

/* Portfolio Page Styles */
.portfolio__hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0d1b2e 0%, #1e2d42 50%, #0d1b2e 100%);
}

/* Portfolio Separator */

.portfolio__hero-content {
    position: relative;
    z-index: 2;
}

.hero__title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 2rem;
    opacity: 1;
    text-align: left;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* New Enhanced Hero Title */
.hero__title-main {
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 3rem;
    opacity: 0;
    text-shadow: 0 0 30px rgba(214, 185, 168, 0.3);
    letter-spacing: -2px;
}

.typing-text {
    display: inline-block;
    color: #d6b9a8;
    position: relative;
}

.typing-text-main {
    display: inline-block;
    color: #d6b9a8;
    position: relative;
    background: linear-gradient(45deg, #d6b9a8, #ead7c7, #d6b9a8);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.cursor {
    color: #d6b9a8;
    font-weight: normal;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.hero__description {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0;
}

.hero__description-typing {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 800px;
    margin: 0 auto 4rem;
    line-height: 1.7;
    opacity: 0;
}

.typing-description {
    display: inline;
    color: rgba(255, 255, 255, 0.9);
}

/* Hero Portfolio Showcase */
.hero__portfolio-showcase {
    margin-top: 4rem;
    opacity: 0;
}

.hero__portfolio-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(214, 185, 168, 0.1);
    backdrop-filter: blur(10px);
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero__portfolio-item:hover {
    transform: translateY(-10px);
    background: rgba(214, 185, 168, 0.1);
    border-color: rgba(214, 185, 168, 0.3);
    box-shadow: 0 20px 40px rgba(214, 185, 168, 0.2);
}

.hero__portfolio-image {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(214, 185, 168, 0.1);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.hero__portfolio-item:hover .hero__portfolio-image {
    background: rgba(214, 185, 168, 0.2);
    transform: scale(1.1);
}

.hero__portfolio-image img {
    max-width: 50px;
    max-height: 50px;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

.hero__portfolio-item:hover .hero__portfolio-image img {
    filter: brightness(0) saturate(100%) invert(77%) sepia(29%) saturate(1352%) hue-rotate(21deg) brightness(98%) contrast(90%);
}

.hero__portfolio-info h4 {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    transition: all 0.3s ease;
}

.hero__portfolio-item:hover .hero__portfolio-info h4 {
    color: #d6b9a8;
}

.portfolio__hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.portfolio__hero-bg .hero-shape-1 {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(214, 185, 168, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.portfolio__hero-bg .hero-shape-2 {
    position: absolute;
    bottom: 20%;
    left: 10%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(214, 185, 168, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@media (max-width: 768px) {
    .portfolio__hero {
        padding: 80px 0;
        min-height: 80vh;
    }
    
    .hero__title {
        font-size: 2.5rem;
    }
    
    .hero__description {
        font-size: 1rem;
        padding: 0 20px;
    }
}

/* Services Page Styles */
.services__hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0d1b2e 0%, #1e2d42 50%, #0d1b2e 100%);
    overflow: hidden;
    padding: 120px 0;
}

.services__hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.services__hero-subtitle {
    margin-bottom: 30px;
}

.hero-subtitle-text {
    display: inline-block;
    color: #d6b9a8;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(30px);
    position: relative;
}

.hero-subtitle-text::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: #d6b9a8;
}

.services__hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 40px;
    color: #FFFFFF;
    text-align: center
}

.services__hero-title span {
    display: block;
    opacity: 0;
    transform: translateY(50px);
}

.hero-text-2 {
    color: #d6b9a8;
    font-style: italic;
}

.services__hero-description {
    margin-bottom: 60px;
    font-size: 24px;
    line-height: 1.8;
    color: #e7d3c5;
    margin-top: 25px;
    letter-spacing: 0.5px;
}

.services__hero-description p {
    margin: 8px 0;
    opacity: 0;
    transform: translateY(30px);
}

.services__hero-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-feature-item {
    background: rgba(214, 185, 168, 0.1);
    border: 1px solid rgba(214, 185, 168, 0.3);
    border-radius: 10px;
    padding: 15px 20px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
}

.hero-feature-item:hover {
    background: rgba(214, 185, 168, 0.2);
    border-color: #d6b9a8;
    transform: translateY(-5px);
}

.hero-feature-item span {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
}

.services__hero-marketing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    max-width: 600px;
    margin: 0 auto;
}

.services__hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: none;
}

.hero-shape-1 {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(214, 185, 168, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.hero-shape-2 {
    position: absolute;
    bottom: 20%;
    left: 15%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(214, 185, 168, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite reverse;
}

.hero-shape-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(231, 211, 197, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 10s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}

/* Web Design Page Styles */
.webdesign__hero {
    position: relative;
    padding: 150px 0;
    background: linear-gradient(135deg, #0d1b2e 0%, #1e2d42 100%);
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

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

.webdesign__hero-subtitle {
    margin-bottom: 30px;
}

.webdesign__hero-subtitle span {
    display: inline-block;
    color: #d6b9a8;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(30px);
}

.webdesign__hero-title {
    font-size: 4.5rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 40px;
}

.webdesign__hero-title span {
    display: block;
    opacity: 0;
    transform: translateY(50px);
}

.webdesign__hero-title .hero-text-2 {
    color: #d6b9a8;
}

.webdesign__hero-description {
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #CCCCCC;
}

.webdesign__hero-description p {
    margin: 0;
    opacity: 0;
    transform: translateY(30px);
}

.webdesign__hero-features {
    margin-top: 60px;
}

.hero-feature-list {
    padding: 0 20px;
}

.webdesign__hero .hero-feature-item {
    display: flex;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(214, 185, 168, 0.2);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
    text-align: left;
}

.webdesign__hero .hero-feature-item:hover {
    background: rgba(214, 185, 168, 0.1);
    border-color: #d6b9a8;
    transform: translateY(-5px);
}

.webdesign__hero .feature-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #d6b9a8, #e7d3c5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0d1b2e;
}

.webdesign__hero .feature-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 10px 0;
}

.webdesign__hero .feature-content p {
    font-size: 1rem;
    color: #CCCCCC;
    margin: 0;
    line-height: 1.6;
    opacity: 1;
    transform: none;
}

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

.webdesign__hero-bg .hero-shape-1 {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #d6b9a8, #e7d3c5);
    border-radius: 50%;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
}

.webdesign__hero-bg .hero-shape-2 {
    position: absolute;
    bottom: 20%;
    left: 10%;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #d6b9a8, #b08d6b);
    border-radius: 30%;
    opacity: 0.1;
    animation: float 8s ease-in-out infinite reverse;
}

.webdesign__hero-bg .hero-shape-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(214, 185, 168, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 4s ease-in-out infinite;
}

@media (max-width: 768px) {
    .services__hero {
        padding: 80px 0;
        min-height: 80vh;
    }
    
    .services__hero-features {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .services__hero-marketing {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .services__hero-description {
        font-size: 18px;
    }
    
    .webdesign__hero-title {
        font-size: 3rem;
    }
    
    .webdesign__hero-description {
        font-size: 1rem;
    }
    
    .webdesign__hero .hero-feature-item {
        flex-direction: column;
        text-align: center;
    }
    
    .webdesign__hero .feature-number {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

/* Team Page Styles */
.team__hero {
    background: #0d1b2e;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.team__hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: linear-gradient(135deg, rgba(214, 185, 168, 0.1) 0%, rgba(214, 185, 168, 0.1) 100%); */
    z-index: 1;
}

.team__hero-content {
    position: relative;
    z-index: 2;
}

.team__hero-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.subtitle-line {
    width: 60px;
    height: 2px;
    background: var(--ct-accent);
}

.subtitle-text {
    color: var(--ct-accent);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.team__hero-title {
    color: var(--ct-white);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
}

.team__hero-title span {
    display: block;
    opacity: 0;
    transform: translateY(50px);
}

.hero-text-1 {
    color: var(--ct-white);
}

.hero-text-2 {
    color: var(--ct-accent);
    font-style: italic;
}

.hero-text-3 {
    color: var(--ct-white);
    font-size: 3.5rem;
}

.team__hero-description {
    margin-bottom: 3rem;
}

.team__hero-description p {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(30px);
}

.team__hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.hero-stat-item {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
}

.team__hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.hero-shape-1,
.hero-shape-2,
.hero-shape-3 {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(214, 185, 168, 0.1) 0%, rgba(214, 185, 168, 0.1) 100%);
}

.hero-shape-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    right: 10%;
    animation: float 6s ease-in-out infinite;
}

.hero-shape-2 {
    width: 200px;
    height: 200px;
    bottom: 20%;
    left: 15%;
    animation: float 8s ease-in-out infinite reverse;
}

.hero-shape-3 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 20%;
    animation: float 7s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Team Members Styles */
.team__area {
    background: linear-gradient(135deg, #0d1b2e 0%, #1e2d42 50%, #0d1b2e 100%);
    position: relative;
}

.team__area .header_v2 {
    color: var(--ct-white);
    text-align: center;
}

.team__area .sec-title-wrapper p {
    color: rgba(255, 255, 255, 0.75);
}

.team-stack-wrapper {
    position: relative;
    height: 100vh;
}

.team-stack-offset {
    height: 400vh;
}

.team-stack-container {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--d-black);
    overflow: visible;
    z-index: 3;
    opacity: 1 !important;
    visibility: visible !important;
}

.team-stack-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.team-stack-fallback {
    height: auto;
}

.team-stack-fallback .team-stack-offset {
    display: none;
}

.team-stack-fallback .team-stack-container {
    position: relative;
    height: auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 40px;
    padding: 20px 0 10px;
    justify-items: center;
    background: transparent;
}

.team-stack-fallback .team-stack-item {
    position: static;
    transform: none;
    z-index: 2;
    grid-column: span 2;
}

.team-stack-fallback .team-stack-item[data-member="4"] {
    grid-column: 2 / span 2;
}

.team-stack-fallback .team-stack-item[data-member="5"] {
    grid-column: 4 / span 2;
}

.team-stack-fallback .team-member-card {
    width: 100%;
    max-width: 260px;
    padding: 24px 16px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

.team-stack-fallback .team-member-card:hover {
    /* Hover effect removed as per request */
    transform: none;
    box-shadow: none;
}

.team-stack-fallback .team-stack-frame {
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.team-stack-fallback .team-info h3 {
    font-size: 1.1rem;
}

.team-stack-fallback .team-role {
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.75);
}

.team-stack-fallback .team-stack-item {
    opacity: 0;
    transform: translateY(20px);
    animation: teamFadeUp 0.8s ease forwards;
}

.team-stack-fallback .team-stack-item:nth-child(1) { animation-delay: 0.05s; }
.team-stack-fallback .team-stack-item:nth-child(2) { animation-delay: 0.15s; }
.team-stack-fallback .team-stack-item:nth-child(3) { animation-delay: 0.25s; }
.team-stack-fallback .team-stack-item:nth-child(4) { animation-delay: 0.35s; }
.team-stack-fallback .team-stack-item:nth-child(5) { animation-delay: 0.45s; }
.team-stack-fallback .team-stack-item:nth-child(6) { animation-delay: 0.55s; }

@keyframes teamFadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-stack-fallback .team-stack-item {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 991px) {
    .team-stack-container {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        padding: 50px 20px;
    }

    .team-stack-fallback .team-stack-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-stack-fallback .team-stack-item {
        grid-column: auto;
    }

    .team-stack-item {
        position: static;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .team-member-card {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .team-stack-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .team-stack-fallback .team-stack-container {
        grid-template-columns: 1fr;
    }

    .team-stack-fallback .team-stack-item {
        grid-column: auto;
    }
}

.team-stack-item--center {
    z-index: 10;
    top: 30%;
}

.team-stack-item--left {
    left: 20%;
    top: 30%;
}

.team-stack-item--right {
    left: auto;
    right: 20%;
    top: 30%;
    transform: translate(50%, -50%);
}

.team-stack-item--bottom-left {
    top: auto;
    bottom: 15%;
    left: 30%;
    transform: translateX(-50%);
    z-index: 3;
}

.team-stack-item--bottom-center {
    top: 68%;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.team-stack-item--bottom-center[data-member="4"] {
    left: 42%;
}

.team-stack-item--bottom-center[data-member="5"] {
    left: 58%;
}

.team-stack-item--bottom-right {
    top: auto;
    bottom: 15%;
    right: 30%;
    left: auto;
    transform: translateX(50%);
    z-index: 3;
}

.team-member-card {
    text-align: center;
}

.team-stack-frame {
    border: 2px solid var(--ct-white);
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.team-stack-frame--lg {
    width: 200px;
    height: 200px;
}

.team-stack-frame--md {
    width: 180px;
    height: 180px;
}

.team-stack-frame--sm {
    width: 140px;
    height: 140px;
}

.team-stack-container .team-info {
    margin-top: 20px;
    color: var(--ct-white);
}

.team-stack-item--sm .team-info {
    margin-top: 15px;
}

.team-stack-container .team-info h3 {
    margin: 0;
}

.team-role {
    margin: 5px 0 0;
    opacity: 0.8;
}

.team-stack-item--lg .team-info h3 {
    font-size: 24px;
}

.team-stack-item--md .team-info h3 {
    font-size: 20px;
}

.team-stack-item--sm .team-info h3 {
    font-size: 18px;
}

.team-stack-item--lg .team-role {
    font-size: 16px;
}

.team-stack-item--md .team-role {
    font-size: 14px;
}

.team-stack-item--sm .team-role {
    font-size: 12px;
}

@media (max-width: 991px) {
    .team-stack-item--left {
        left: 15%;
    }
    
    .team-stack-item--right {
        right: 15%;
    }
    
    .team-stack-item--bottom-left {
        left: 25%;
    }
    
    .team-stack-item--bottom-right {
        right: 25%;
    }
    
    .team-stack-frame--lg {
        width: 180px;
        height: 180px;
    }
    
    .team-stack-frame--md {
        width: 160px;
        height: 160px;
    }
    
    .team-stack-frame--sm {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 768px) {
    .team-stack-wrapper {
        height: auto;
    }
    
    .team-stack-offset {
        height: 0;
    }
    
    .team-stack-container {
        position: relative;
        height: auto;
        padding: 60px 0 20px;
    }
    
    .team-stack-item {
        position: static;
        transform: none;
        margin-bottom: 40px;
    }
    
    .team-stack-item--left,
    .team-stack-item--right,
    .team-stack-item--bottom-left,
    .team-stack-item--bottom-center,
    .team-stack-item--bottom-right {
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }
    
    .team-stack-item:last-child {
        margin-bottom: 0;
    }
    
    .team-stack-frame--lg {
        width: 170px;
        height: 170px;
    }
    
    .team-stack-frame--md {
        width: 150px;
        height: 150px;
    }
    
    .team-stack-frame--sm {
        width: 130px;
        height: 130px;
    }
    
    .team-stack-item--lg .team-info h3 {
        font-size: 22px;
    }
    
    .team-stack-item--md .team-info h3 {
        font-size: 18px;
    }
    
    .team-stack-item--sm .team-info h3 {
        font-size: 16px;
    }
    
    .team-stack-item--lg .team-role {
        font-size: 14px;
    }
    
    .team-stack-item--md .team-role {
        font-size: 12px;
    }
    
    .team-stack-item--sm .team-role {
        font-size: 11px;
    }
}

/* Team Stats Section with Dark Background */
.team__stats-area {
    background: var(--ct-primary);
    position: relative;
    padding: 100px 0;
}

.team__stats-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(214, 185, 168, 0.05) 0%, rgba(214, 185, 168, 0.05) 100%);
    z-index: 1;
}

.team__stats-area .sec-title-wrapper {
    position: relative;
    z-index: 2;
}

.team__stats-area .header_v2 {
    color: var(--ct-white);
}

.team__stats-area .team__stat-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.team__stats-area .team__stat-item:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--ct-accent);
}

.team__stats-area .team__stat-number {
    color: var(--ct-accent);
    font-size: 6.5rem;
    font-weight: 900;
    display: block;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, var(--ct-accent) 0%, #e7d3c5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pulse 2s ease-in-out infinite;
    line-height: 1;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.team__stats-area .team__stat-title {
    color: var(--ct-white);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.team__item {
    background: var(--ct-white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 2rem;
    position: relative;
}

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

.team__thumb {
    position: relative;
    overflow: hidden;
    height: 300px;
}

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

.team__item:hover .team__thumb img {
    transform: scale(1.1);
}

.team__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(13, 27, 46, 0.8) 0%, rgba(214, 185, 168, 0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.team__item:hover .team__overlay {
    opacity: 1;
}

.team__social {
    display: flex;
    gap: 1rem;
}

.team__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--ct-accent);
    color: var(--ct-primary);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    transform: translateY(20px);
}

.team__item:hover .team__social-link {
    transform: translateY(0);
}

.team__social-link:hover {
    background: var(--ct-white);
    transform: translateY(-5px);
}

.team__content {
    padding: 2rem;
    text-align: center;
}

.team__name {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.team__position {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.team__bio {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Culture Section */
.culture__area {
    background: linear-gradient(135deg, #f3e7dd 0%, #d6b9a8 35%, #ead7c7 55%, #b08d6b 75%, #f3e7dd 100%);
    position: relative;
}

.culture__area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(255deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 45%),
        repeating-linear-gradient(90deg, rgba(138, 115, 48, 0.18) 0 1px, rgba(255, 255, 255, 0) 1px 120px),
        repeating-linear-gradient(0deg, rgba(138, 115, 48, 0.12) 0 1px, rgba(255, 255, 255, 0) 1px 140px),
        radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 60%);
    mix-blend-mode: soft-light;
    opacity: 0.85;
}

.culture__area .sec-title-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.culture__area .header_v2 {
    color: var(--ct-white);
    text-align: center;
}

.culture__area .sec-title-wrapper p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    text-align: center;
}

.culture__area .row > [class*="col-"] {
    display: flex;
}

.culture__area > .container > .row {
    justify-content: center;
}

.culture__area .row > [class*="col-"]:nth-child(n + 4) {
    margin-top: 15px;
}

.culture__item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.culture__item:hover {
    transform: translateY(-10px);
    background: rgba(0, 0, 0, 0.25);
    border-color: #000;
}

.culture__icon {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.culture__item:hover .culture__icon {
    transform: scale(1.1);
}

.culture__icon i {
    font-size: 2rem;
    color: #000;
}

.culture__title {
    color: var(--ct-white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.culture__text {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

/* Careers Section */
.careers__area {
    background: var(--ct-white);
}

.careers__content {
    max-width: 800px;
    margin: 0 auto;
}

.careers__text {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 3rem;
    line-height: 1.6;
}

.careers__positions {
    background: #f4f5f7;
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 3rem;
}

.careers__positions h3 {
    color: var(--ct-primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.careers__list {
    list-style: none;
    padding: 0;
}

.careers__list li {
    color: #666;
    font-size: 1.1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e6ec;
    position: relative;
    padding-left: 2rem;
}

.careers__list li:last-child {
    border-bottom: none;
}

.careers__list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--ct-accent);
    font-weight: bold;
}

/* Team Stats */
.team__stats {
    background: var(--ct-white);
}

.team__stat {
    padding: 2rem 1rem;
}

.team__stat-number {
    color: var(--ct-accent);
    font-size: 6.5rem;
    font-weight: 900;
    display: block;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, var(--ct-accent) 0%, #e7d3c5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pulse 2s ease-in-out infinite;
    line-height: 1;
}

.team__stat-title {
    color: var(--ct-primary);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .team__hero-title {
        font-size: 3rem;
    }
    
    .hero-text-3 {
        font-size: 2.5rem;
    }
    
    .team__hero-stats {
        flex-direction: column;
        gap: 2rem;
    }
    
    .team__hero-description p {
        font-size: 1.1rem;
    }
    
    .culture__item {
        padding: 2rem 1.5rem;
    }
    
    .team__stats-area .team__stat-number {
        font-size: 5rem;
    }
    
    .team__stat-number {
        font-size: 5rem;
    }
}

.cta__content h2 {
    color: #0d1b2e;
}

.cta__content p {
    color: #b08d6b;
    font-size: 18px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .portfolio__text {
        font-size: 60px;
        padding-top: 50px;
    }
    
    .portfolio__list-1 {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 30px;
    }
    
    .portfolio__grid {
        grid-template-columns: 1fr;
    }
    
    .portfolio__filter-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    
}

/* Contact Page Specific Styles */
.contact__info {
    background-color: #0d1b2e;
    color: #FFFFFF;
}

.contact__info .row:first-child {
    justify-content: center;
    align-items: center;
}

.contact__info .row:first-child > [class*="col-"] {
    display: flex;
    justify-content: center;
}

.contact__info .row:first-child .sec-title-wrapper {
    margin: 0 auto;
}

.contact__info .header_v2 {
    color: #d6b9a8;
    margin-bottom: 30px;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.contact__info-item {
    background-color: #1e2d42;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 320px;
}

.contact__info .sec-title-wrapper {
    text-align: center;
}

.contact__info .sec-title-wrapper h2,
.contact__info .sec-title-wrapper p {
    text-align: center;
}

.contact__info-item:hover {
    background-color: #d6b9a8;
    color: #0d1b2e;
    transform: translateY(-10px);
    border-color: #e7d3c5;
}

.contact__info-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 50%, #d6b9a8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.3s ease;
}

.contact__info-item:hover .contact__info-icon {
    background: #e7d3c5;
    color: #0d1b2e;
}

.contact__info-icon i {
    font-size: 2rem;
    color: #0d1b2e;
    animation: contact-icon-float 3s ease-in-out infinite;
    transform-origin: center;
}

.contact__info-item:hover .contact__info-icon i {
    color: #0d1b2e;
}

.contact__info-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff !important;
}

.contact__info-item:hover .contact__info-title {
    color: #0d1b2e;
}

.contact__info .contact__info-title {
    color: #ffffff !important;
    text-align: center;
}

.contact__info .contact__info-item:hover .contact__info-title {
    color: #0d1b2e !important;
}

.contact__info-item {
    text-align: center;
}

.contact__info-text {
    color: #ffffff;
}

.contact__info-content {
    text-align: center;
}

.contact__info-text {
    text-align: center;
}

.contact__info-text a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact__info-text a:hover {
    color: #e7d3c5 !important;
}

.contact__info-item:hover .contact__info-text a {
    color: #0d1b2e !important;
}

.contact__info-item:hover .contact__info-text {
    color: #0d1b2e;
}

.contact__info-item:hover .contact__info-text a:hover {
    color: #0d1b2e !important;
}

.contact__info-item a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact__info-item a:hover {
    color: #0d1b2e;
    text-decoration: none;
}

.contact__info .row > [class*="col-"] {
    display: flex;
}

@keyframes contact-icon-float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
    100% {
        transform: translateY(0);
    }
}

.contact__info-icon .fa-phone {
    animation: contact-icon-ring 2.4s ease-in-out infinite;
    transform-origin: 50% 20%;
}

.contact__info-icon .fa-envelope {
    animation: contact-icon-envelope-open 2.8s ease-in-out infinite;
}

.contact__info-icon .fa-mobile-screen-button {
    animation: contact-icon-ring 2.6s ease-in-out infinite;
    transform-origin: 50% 20%;
}

.contact__info-icon .fa-location-dot {
    animation: contact-icon-address-move 3s ease-in-out infinite;
}

@keyframes contact-icon-ring {
    0%,
    100% {
        transform: rotate(0);
    }
    8% {
        transform: rotate(12deg);
    }
    16% {
        transform: rotate(-12deg);
    }
    24% {
        transform: rotate(10deg);
    }
    32% {
        transform: rotate(-10deg);
    }
    40% {
        transform: rotate(6deg);
    }
    48% {
        transform: rotate(-6deg);
    }
    56% {
        transform: rotate(2deg);
    }
}

@keyframes contact-icon-envelope-open {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    25% {
        transform: translateY(-6px) rotate(-6deg);
    }
    45% {
        transform: translateY(-12px) rotate(6deg);
    }
    70% {
        transform: translateY(-4px) rotate(0deg);
    }
}

@keyframes contact-icon-address-move {
    0%,
    100% {
        transform: translateX(-10px);
    }
    50% {
        transform: translateX(10px);
    }
}

.contact__info-icon--address {
    position: relative;
}

.contact__info-icon--address::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 0;
    border-top: 2px dashed rgba(13, 27, 46, 0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Contact Form Styling */
.contact__form {
    background-color: #f8f8f8;
}

.contact__form .header_v2 {
    color: #0d1b2e;
    margin-bottom: 20px;
}

.contact__form .sec-title-wrapper p {
    color: #0d1b2e;
}

.faq__area .sec-title-wrapper .header_v2 {
    text-align: center;
}

.contact__form-group {
    margin-bottom: 25px;
}

.contact__form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #0d1b2e;
    font-size: 0.95rem;
}

.contact__form-group input,
.contact__form-group textarea,
.contact__form-group select {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 1rem;
    background-color: #FFFFFF;
    color: #0d1b2e;
    transition: all 0.3s ease;
    outline: none;
}

.contact__form-group input:focus,
.contact__form-group textarea:focus,
.contact__form-group select:focus {
    border-color: #d6b9a8;
    box-shadow: 0 0 0 3px rgba(214, 185, 168, 0.1);
}

/* Custom Select Styles */

/* Budget Selection Styles */

/* Service Selection Styles */
.service-selection {
    margin-top: 10px;
}

.service-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

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

/* Service Radio Styles */
.service-radio {
    display: none;
}

.service-option {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
    text-align: left;
}

.service-option:hover {
    border-color: #d6b9a8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(214, 185, 168, 0.2);
}

.service-radio:checked + .service-option {
    border-color: #d6b9a8;
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%);
    color: #0d1b2e;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(214, 185, 168, 0.3);
}

.service-text {
    font-weight: 600;
    font-size: 14px;
    margin-left: 10px;
}

.contact__form-group select {
    cursor: pointer;
}

/* =========================================
   Workflow Area (Web Design Page) Fixes
   ========================================= */

/* Section Background */
.workflow__area {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
    position: relative;
    overflow: hidden;
}

/* Background Process Text (Glassmorphism + Centered) */
.process__text,
.process__text-2 {
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
    font-size: 9vw; /* Further reduced from 8vw */
    font-weight: 800;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 0;
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
    transform: rotate(-15deg); /* Restored rotation */
    
    /* Glassmorphism Shine Effect */
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine-text 5s linear infinite;
    backdrop-filter: blur(2px);
    margin-top: -200px;
}

.process__text-2 {
    top: 50%;
    transform: translateY(-50%) rotate(-15deg);
    font-size: 12vw;
    opacity: 0.45;
}

.process__text {
    top: 75%; /* Positioned much lower to increase gap */
    opacity: 0.5;
}

@keyframes shine-text {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Title & Description */
.workflow__area .sec-title-wrapper h2 {
    color: var(--primary) !important;
}

.workflow__area .sec-title-wrapper p {
    color: #e0e0e0 !important;
}

.workflow__area .sec-title-wrapper .workflow__headline {
    color: #ffffff !important;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0;
}

/* Workflow Items */
.workflow__item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 30px;
    border-radius: 20px;
    transition: all 0.4s ease;
    height: 100%;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.workflow__item p {
    text-align: justify;
}

.workflow__item:hover {
    background: rgba(214, 185, 168, 0.15); /* Gold tint */
    border-color: var(--primary);
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

/* Number Styling */
.workflow__number {
    font-size: 4rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 20px;
    right: 20px;
    line-height: 1;
    transition: all 0.4s ease;
}

.workflow__item:hover .workflow__number {
    color: rgba(214, 185, 168, 0.3);
    transform: scale(1.1);
}

/* Item Title & Text */
.workflow__title {
    color: var(--white) !important;
    font-size: 1.8rem;
    margin-bottom: 20px;
    margin-top: 20px;
}

.workflow__item:hover .workflow__title {
    color: var(--primary) !important;
}

.workflow__item p {
    color: #ccc !important;
    font-size: 1.1rem;
    line-height: 1.6;
}

.workflow__item:hover p {
    color: #fff !important;
}

/* =========================================
   Features Area Redesign
   ========================================= */

.feature__area {
    background-color: #f8f8f8; /* Light gray background for contrast */
}

.feature__item {
    background: #fff;
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0,0,0,0.05);
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.feature__area .row > [class*="col-"]:nth-child(n + 4) {
    margin-top: 20px;
}

/* Hover Effect: Lift & Shadow */
.feature__item:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: var(--primary);
}

/* Icon Container */
.feature__icon {
    width: 100px;
    height: 100px;
    background: rgba(214, 185, 168, 0.1); /* Light Gold Background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.feature__item:hover .feature__icon {
    background: var(--primary); /* Gold Background on Hover */
    transform: scale(1.1) rotate(5deg);
}

/* Icon Itself */
.feature__icon i {
    font-size: 45px; /* Much Larger Icons */
    color: var(--primary);
    transition: all 0.5s ease;
}

.feature__item:hover .feature__icon i {
    color: var(--secondary); /* Dark Icon on Gold Background */
    transform: scale(1.2);
}

/* Feature Title */
.feature__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--secondary);
    transition: color 0.3s ease;
    padding: 0 10px;
    text-align: center;
}

.feature__item:hover .feature__title {
    color: var(--primary);
}

/* Feature Description */
.feature__item p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 0;
    padding: 0 10px;
}

/* Unique Hover Animations for Each Feature Type */
/* Palette (Custom Design) */
.feature__item:has(.fa-palette):hover .feature__icon i {
    animation: swing 1s ease-in-out infinite;
}

/* Mobile (Mobile-First) */
.feature__item:has(.fa-mobile-alt):hover .feature__icon i {
    animation: shake 0.5s ease-in-out infinite;
}

/* Users (User-Centered) */
.feature__item:has(.fa-users):hover .feature__icon i {
    animation: bounce 1s infinite;
}

/* Search (SEO Ready) */
.feature__item:has(.fa-search):hover .feature__icon i {
    animation: pulse 1s infinite;
}

/* Careers Section */
.careers__content .header_v2 {
  font-size: 42px;
  text-align: center;
}

.careers__content .btn_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0;
}

/* Bolt (Fast Loading) */
.feature__item:has(.fa-bolt):hover .feature__icon i {
    animation: flash 1s infinite;
}

/* Shield (Secure) */
.feature__item:has(.fa-shield-alt):hover .feature__icon i {
    animation: tada 1s infinite;
}

/* Keyframes */
@keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }

/* =========================================
   Team Stats Area Redesign (Luxury & Minimal)
   ========================================= */

/* Main Container Background */
.bg-dark-secondary {
    background-color: #162032 !important; /* Richer Dark Background */
}

/* Stats Card Styling */
.mxd-stats-cards__inner {
    border-radius: 30px !important;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
}

.mxd-stats-cards__inner:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    border-color: rgba(214, 185, 168, 0.3); /* Gold border on hover */
}

/* Background Colors & Gradients */
.bg-accent {
    background: linear-gradient(135deg, #d6b9a8 0%, #b08d6b 100%) !important; /* Deep Rose Gradient */
}

.bg-base-tint {
    background: linear-gradient(135deg, #1e2d42 0%, #0d1b2e 100%) !important; /* Dark Minimal Gradient */
}

.bg-base-opp {
    background: #d6b9a8 !important; /* Gold Accent */
}

/* Typography & Colors */
.mxd-counter__number {
    font-size: 5rem !important;
    font-weight: 800;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

.bg-base-tint .mxd-counter__number {
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%); /* Gold Numbers on Dark BG */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mxd-counter__descr {
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.bg-base-tint .mxd-counter__descr {
    color: #ccc !important;
}

/* Content Alignment */
.mxd-counter {
    position: relative;
    z-index: 2;
    text-align: left; /* Force left alignment */
    margin-bottom: 20px;
    padding-left: 20px;
}

.mxd-counter.align-end {
    align-items: flex-start !important; /* Override existing alignment */
}

/* Buttons (Circular with Icon) */
.mxd-stats-cards__btngroup .btn {
    width: 60px; /* Circular size */
    height: 60px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff !important;
    transition: all 0.3s ease;
    position: absolute; /* Position in corner */
    top: 30px;
    right: 30px;
    z-index: 10;
}

.mxd-stats-cards__btngroup .btn-caption {
    display: none; /* Hide text */
}

.mxd-stats-cards__btngroup .btn i {
    font-size: 24px;
    transform: rotate(-45deg); /* Arrow pointing up-right */
    transition: transform 0.3s ease;
}

.mxd-stats-cards__btngroup .btn:hover {
    background: #fff;
    color: #0d1b2e !important;
    border-color: #fff;
    transform: scale(1.1);
}

.mxd-stats-cards__btngroup .btn:hover i {
    transform: rotate(0deg); /* Arrow straightens on hover */
}

.bg-base-tint .mxd-stats-cards__btngroup .btn:hover {
    background: #d6b9a8;
    color: #0d1b2e !important;
    border-color: #d6b9a8;
}

/* Icons */
.ph-bold {
    font-weight: bold;
}

.mxd-avatars__icon {
    fill: #0d1b2e !important; /* Dark icon on Gold BG */
}

/* Images - Making them larger and filling space */
.mxd-stats-cards__image {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 60%; /* Increased size */
    height: auto;
    opacity: 0.9;
    transition: all 0.5s ease;
    mix-blend-mode: normal; /* Removed blend mode for clarity */
}

.mxd-stats-cards__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

.mxd-stats-cards__inner:hover .mxd-stats-cards__image {
    transform: scale(1.1) rotate(-5deg);
    opacity: 1;
}

/* Specific Card Adjustments */
.mxd-stats-cards-image-1 {
    width: 50%;
    bottom: 10px;
    right: 10px;
}

.mxd-stats-cards-image-3 {
    width: 55%;
    bottom: 0;
    right: 0;
}

.mxd-stats-cards-image-4 {
    width: 45%;
    bottom: 10px;
    right: 10px;
}

/* Avatars Section */
.mxd-avatars__item {
    border: 3px solid #1e2d42 !important; /* Dark border matching BG */
    width: 70px;
    height: 70px;
}

.mxd-avatars__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* FAQ Section Styles */
.faq__section {
    background: #f4f5f7;
    padding: 80px 0;
}

.faq__header {
    text-align: center;
    margin-bottom: 60px;
}

.faq__title {
    font-size: 42px;
    font-weight: 700;
    color: #0d1b2e;
    margin-bottom: 15px;
    position: relative;
}

.faq__title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%);
    border-radius: 2px;
}

.faq__subtitle {
    font-size: 18px;
    color: #666;
    margin: 0;
}

.faq__container {
    max-width: 800px;
    margin: 0 auto;
}

.faq__item {
    background: #fff;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.faq__question {
    display: flex;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.faq__question:hover {
    background: #f4f5f7;
}

.faq__question.active {
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%);
    color: #0d1b2e;
}

.faq__question.active .faq__toggle i {
    transform: rotate(45deg);
    color: #0d1b2e;
}

.faq__question.active .faq__icon i {
    color: #0d1b2e;
}

.faq__icon {
    font-size: 24px;
    margin-right: 15px;
    flex-shrink: 0;
}

.faq__icon i {
    color: #d6b9a8;
    text-shadow: 0 6px 10px rgba(0, 0, 0, 0.25), 0 2px 0 rgba(255, 255, 255, 0.2);
    transform: translateZ(0);
}

.faq__question h3 {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: inherit;
}

.faq__toggle {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f0f0;
    transition: all 0.3s ease;
}

.faq__toggle i {
    font-size: 14px;
    color: #666;
    transition: all 0.3s ease;
}

.faq__answer {
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

.faq__answer.active {
    padding: 0 30px 25px;
    max-height: 200px;
}

.faq__answer p {
    margin: 0;
    color: #666;
    line-height: 1.6;
    font-size: 16px;
}

/* CTA Section Styles */
.cta__section {
    background: linear-gradient(135deg, #0d1b2e 0%, #333 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.cta__section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23d6b9a8" opacity="0.1"/><circle cx="80" cy="40" r="1" fill="%23d6b9a8" opacity="0.1"/><circle cx="40" cy="80" r="1" fill="%23d6b9a8" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    opacity: 0.3;
}

.cta__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.cta__text {
    margin-bottom: 50px;
}

.cta__text h2,
.cta__text p {
    text-align: center;
}

.cta__title {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
}

.cta__title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%);
    border-radius: 2px;
}

.cta__subtitle {
    font-size: 20px;
    color: #ccc;
    margin: 0;
    line-height: 1.6;
}

.cta__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: nowrap;
}

.cta__circle-btn {
    position: relative;
}

.circle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%);
    color: #0d1b2e;
    text-decoration: none;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(214, 185, 168, 0.3);
}

.circle-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #e7d3c5 0%, #d6b9a8 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.circle-btn:hover::before {
    opacity: 1;
}

.circle-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 40px rgba(214, 185, 168, 0.4);
    color: #0d1b2e;
}

.circle-btn--outline {
    background: transparent;
    border: 3px solid #d6b9a8;
    color: #d6b9a8;
    box-shadow: 0 10px 30px rgba(214, 185, 168, 0.2);
}

.circle-btn--outline::before {
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%);
}

.circle-btn--outline:hover {
    color: #0d1b2e;
    border-color: #e7d3c5;
}

.btn-icon {
    font-size: 28px;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

.btn-icon i {
    display: inline-block;
    transform: translateZ(0);
    filter: none;
    opacity: 1;
    color: #d6b9a8;
    text-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.circle-btn:hover .btn-icon i {
    color: #0d1b2e;
    text-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

.btn-text {
    font-size: 14px;
    font-weight: 600;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.circle-btn:hover .btn-icon,
.circle-btn:hover .btn-text {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .cta__title {
        font-size: 36px;
    }
    
    .cta__subtitle {
        font-size: 18px;
    }
    
    .cta__actions {
        gap: 30px;
    }
    
    .circle-btn {
        width: 100px;
        height: 100px;
    }
    
    .btn-icon {
        font-size: 20px;
    }
    
    .btn-text {
        font-size: 12px;
    }
}

.contact__form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.contact__form-checkbox input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: #d6b9a8;
}

.contact__form-checkbox label {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.contact__form-checkbox a {
    color: #d6b9a8;
    text-decoration: none;
}

.contact__form-checkbox a:hover {
    color: #d6b9a8;
    text-decoration: underline;
}

.service__hero-left-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-content: start;
    padding-top: 40px;
}

.service__hero-left-2 .hero-glass-card {
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(214, 185, 168, 0.35);
    border-radius: 22px;
    padding: 28px 22px;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.service__hero-left-2 .hero-glass-card .hero-glass-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 28px;
    color: var(--ct-primary);
    text-shadow: 0 10px 20px rgba(214, 185, 168, 0.35);
}

.service__hero-left-2 .hero-glass-card .hero-glass-icon i {
    color: var(--ct-primary);
}

.service__hero-left-2 .hero-glass-card .hero-glass-rank {
    font-size: 44px;
    font-weight: 800;
    color: var(--ct-primary);
    letter-spacing: -1px;
}

.service__hero-left-2 .hero-glass-card .hero-glass-sub {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--black);
}

.service__hero-left-2 .hero-glass-card .hero-glass-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--black);
}

.service__hero-left-2 .image-1,
.service__hero-left-2 .image-2,
.service__hero-left-2 .image-3,
.service__hero-left-2 .image-4 {
    transform: none;
    position: static;
    left: auto;
    bottom: auto;
}

.service__hero-left-2 .image-1 {
    transform: translate(-18px, 10px) rotate(-4deg);
    justify-self: start;
}

.service__hero-left-2 .image-2 {
    transform: translate(22px, -6px) rotate(3deg);
    justify-self: end;
}

.service__hero-left-2 .image-3 {
    transform: translate(-10px, 26px) rotate(5deg);
    justify-self: center;
}

.service__hero-left-2 .image-4 {
    transform: translate(26px, 18px) rotate(-2deg);
    justify-self: end;
}

@media (max-width: 991px) {
    .service__hero-left-2 {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-top: 20px;
    }

    .service__hero-left-2 .image-1,
    .service__hero-left-2 .image-2,
    .service__hero-left-2 .image-3,
    .service__hero-left-2 .image-4 {
        transform: none;
        justify-self: stretch;
    }
}

/* Business Hours Section */
.business__hours {
    background: #f4f5f7;
    padding: 60px 0;
}

.business__hours--dark {
    background: linear-gradient(135deg, #0d1b2e 0%, #333 100%);
    position: relative;
    overflow: hidden;
}

.business__hours--dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23d6b9a8" opacity="0.1"/><circle cx="80" cy="40" r="1" fill="%23d6b9a8" opacity="0.1"/><circle cx="40" cy="80" r="1" fill="%23d6b9a8" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    opacity: 0.3;
}

.business__hours-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.business__hours-image {
    text-align: center;
    position: relative;
    z-index: 2;
}

.business__hours-image img {
    width: 100%;
    height: auto;
    max-width: 600px;
    object-fit: contain;
}

.business__hours h2 {
    font-size: 36px;
    margin-bottom: 40px;
    color: #0d1b2e;
    position: relative;
}

.business__hours--dark h2 {
    color: #fff;
}

.business__hours--dark h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    transform: none;
    width: 80px;
    height: 3px;
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%);
    border-radius: 2px;
}

.business__hours--dark .hours__list {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(214, 185, 168, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.business__hours--dark .hours__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hours__item .day {
    font-weight: 600;
    color: #0d1b2e;
}

.business__hours--dark .hours__item .day {
    color: #fff;
}

.hours__item .time {
    color: #d6b9a8;
    font-weight: 500;
}

.business__hours .header_v2 {
    color: #d6b9a8;
    margin-bottom: 25px;
}

.business__hours-text {
    color: #e0e0e0;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.business__hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #243651;
}

.business__hours-item:last-child {
    border-bottom: none;
}

.business__hours-item .day {
    font-weight: 600;
    color: #d6b9a8;
}

.business__hours-item .time {
    color: #FFFFFF;
}

.business__hours-note {
    margin-top: 30px;
    padding: 20px;
    background-color: #1e2d42;
    border-radius: 10px;
    border-left: 4px solid #d6b9a8;
}

.business__hours-note strong {
    color: #d6b9a8;
}

/* =========================================
   Refactored Inline Utilities (Migration)
   ========================================= */

.text-black-pure {
    color: black !important;
}

.text-gray-999 {
    color: #999 !important;
}

.bg-dark-secondary {
    background-color: #0d1b2e !important;
}

.opacity-0 {
    opacity: 0;
}

.pt-0 {
    padding-top: 0 !important;
}

/* Page Specific Overrides */
.webdesign__hero-title-adj {
    margin-top: -80px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.webdesign__hero-description-adj {
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
}

.offcanvas-trigger-icon {
    color: white;
    font-size: 22px;
}

/* FAQ Section */
.faq__area {
    background-color: #f8f8f8;
}

/* =========================================
   Service Area (Three Pillars) Fixes
   ========================================= */

/* Fix invisible white title on light background */
.service__area .header_v3.white {
    color: var(--secondary) !important;
}

/* Service Item Styling */
.service__item {
    border-bottom: 1px solid rgba(13, 27, 46, 0.1);
    transition: all 0.3s ease;
    padding: 35px 20px; /* Add padding for better spacing */
}

/* Dark background on hover */
.service__item:hover {
    background-color: var(--secondary);
    border-radius: 10px; /* Rounded corners on hover */
    border-color: transparent;
    transform: translateY(-5px); /* Slight lift */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Hover Content Colors */
.service__item:hover .service__title {
    color: var(--primary) !important; /* Gold Title */
}

.service__item:hover .service__number span {
    color: var(--white) !important;
    opacity: 0.5;
}

.service__item:hover .service__text p {
    color: #e0e0e0 !important; /* Light Gray Text */
}

.service__item:hover .service__link i {
    color: var(--primary) !important; /* Gold Arrow */
    transform: translateX(5px);
}

/* Fix Links inside text */
.service__item:hover .service__text a {
    color: var(--primary) !important;
}

/* Active Image Border (Left Side) */
.service__img.active {
    border: 2px solid var(--primary);
    border-radius: 15px;
}

.faq__area .header_v2 {
    color: #0d1b2e;
    margin-bottom: 20px;
}

.accordion-item {
    background-color: #FFFFFF;
    border: 2px solid #e0e0e0;
    border-radius: 15px !important;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-item:hover {
    border-color: #d6b9a8;
    box-shadow: 0 5px 20px rgba(214, 185, 168, 0.1);
}

.accordion-button {
    background-color: transparent;
    border: none;
    padding: 25px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0d1b2e;
    text-align: left;
    width: 100%;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    background-color: #d6b9a8;
    color: #0d1b2e;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border: none;
}

.accordion-button::after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%230d1b2e"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%230d1b2e"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
    transform: rotate(180deg);
}

.accordion-body {
    padding: 0 30px 25px;
    color: #555;
    line-height: 1.6;
    font-size: 1rem;
}

/* CTA Section */
.cta__area {
    background: linear-gradient(135deg, #0d1b2e 0%, #1e2d42 100%);
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.cta__area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23d6b9a8" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    opacity: 0.3;
}

.cta__content {
    position: relative;
    z-index: 2;
}

.cta__area .header_v2 {
    color: #d6b9a8;
    margin-bottom: 25px;
    font-size: 3rem;
}

.cta__text {
    font-size: 1.2rem;
    color: #e0e0e0;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Removed CTA button custom styling to use default circular button design */

/* =========================================
   Service Stack Banner Color Overrides
   ========================================= */

.bg-accent {
    background-color: #1e2d42 !important; /* Navy Light accent card — keeps white text readable */
    color: var(--white) !important;
}

.bg-base-opp {
    background-color: var(--secondary) !important; /* Cloud Tart Dark #0d1b2e */
    color: var(--white) !important;
}

.bg-base-tint {
    background-color: var(--white-2) !important; /* Light Gray */
    color: var(--black) !important;
}

/* Ensure text contrast for opposites */
.opposite, .t-opposite {
    color: var(--white) !important;
}

/* Removed .cta__area .wc-btn-primary styles to allow default circular button styling */

/* Removed CTA area wc-btn-secondary styles to use default circular button design */

/* Portfolio Stats Section */

/* Text highlights */
.highlight-cloudtart {
    background-color: #d6b9a8;
    color: #0d1b2e;
    padding: 2px 6px;
    border-radius: 3px;
}
.contact__hero.hero__area {
    padding-top: 90px;
    padding-bottom: 70px;
}
.contact__hero .hero__title {
    font-size: clamp(44px, 6vw, 110px);
    line-height: 1.05;
    margin-top: 30px;
    margin-bottom: 24px;
    text-transform: none;
}
.contact__hero .hero__title span {
    display: inline-block;
    white-space: nowrap;
}
.contact__hero .hero__text {
    max-width: 760px;
    margin: 12px auto 0;
}

/* Border colors */
.border-cloudtart-primary {
    border-color: #d6b9a8 !important;
}

.border-cloudtart-secondary {
    border-color: #0d1b2e !important;
}

.border-cloudtart-accent {
    border-color: #d6b9a8 !important;
}

/* Dynamic Team Section Styles */
.dynamic-team-section {
    background: linear-gradient(135deg, #0d1b2e 0%, #1e2d42 100%);
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}

.dynamic-team-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="teamgrain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23d6b9a8" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23teamgrain)"/></svg>') repeat;
    opacity: 0.3;
}

.dynamic-team-section .container {
    position: relative;
    z-index: 2;
}

.dynamic-team-title {
    text-align: center;
    margin-bottom: 80px;
}

.dynamic-team-title h2 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #d6b9a8;
    margin-bottom: 20px;
    position: relative;
}

.dynamic-team-title p {
    font-size: 1.2rem;
    color: #e0e0e0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.team-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.dynamic-team-item {
    position: relative;
    text-align: center;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

.dynamic-frame {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 30px;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    padding: 0;
    animation: morphFrame 8s ease-in-out infinite;
    transform-origin: center;
}

.dynamic-frame::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, #d6b9a8, #d6b9a8, #b08d6b, #e7d3c5);
    border-radius: 50%;
    z-index: -1;
    animation: glowPulse 6s ease-in-out infinite;
    opacity: 0.3;
}

.dynamic-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
}

/* Team Section Background */
.team__area {
    background: linear-gradient(135deg, #0d1b2e 0%, #1e2d42 50%, #0d1b2e 100%);
    position: relative;
}

.team__area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="teamgrain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23d6b9a8" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23teamgrain)"/></svg>');
    opacity: 0.3;
}

.team__area .container {
    position: relative;
    z-index: 2;
}

.team-info {
    position: relative;
    z-index: 2;
}

.team-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.team-info .team-specialty {
    font-size: 1rem;
    color: #d6b9a8;
    margin-bottom: 20px;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    display: block;
}

.team-info .specialty {
    font-size: 1rem;
    color: #d6b9a8;
    margin-bottom: 20px;
    font-weight: 500;
}

.team-social {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.team-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(214, 185, 168, 0.1);
    border: 2px solid #d6b9a8;
    border-radius: 50%;
    color: #d6b9a8;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
}

.team-social a:hover {
    background: #d6b9a8;
    color: #0d1b2e;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(214, 185, 168, 0.3);
}

/* Carousel Navigation */
.carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 60px;
}

.carousel-btn {
    background: rgba(214, 185, 168, 0.1);
    border: 2px solid #d6b9a8;
    color: #d6b9a8;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 18px;
    pointer-events: auto;
    z-index: 9999;
}

.carousel-btn:hover {
    background: #d6b9a8;
    color: #0d1b2e;
    transform: scale(1.1);
}

.carousel-dots {
    display: flex;
    gap: 10px;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(214, 185, 168, 0.3);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-dot.active {
    background: #d6b9a8;
    transform: scale(1.2);
}

/* Dynamic Animations - No Rotation */
@keyframes morphFrame {
    0%, 100% {
        border-radius: 50%;
    }
    25% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
    }
    75% {
        border-radius: 40% 60% 60% 40%/70% 30% 60% 40%;
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* Synchronized frame animations - all frames move together */
.dynamic-team-item .dynamic-frame {
    animation-delay: 0s;
}

.dynamic-team-item .dynamic-frame::before {
    animation-delay: 0s;
}

/* Responsive Design */
@media (max-width: 992px) {
    .team-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .dynamic-frame {
        width: 240px;
        height: 240px;
    }
    
    .dynamic-team-title h2 {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .team-grid-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .dynamic-frame {
        width: 280px;
        height: 280px;
    }
    
    .dynamic-team-title h2 {
        font-size: 2.5rem;
    }
    
    .dynamic-team-section {
        padding: 80px 0;
    }
}

/* Testimonials Two-Column Layout */
.testimonial__content {
    padding-right: 50px;
}

.testimonial__content h2 {
    margin-bottom: 20px;
    letter-spacing: 0;
    word-spacing: normal;
    text-align: left;
}

.testimonial__content p {
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

.testimonial__navigation {
    display: flex;
    gap: 15px;
}

.testimonial-prev,
.testimonial-next {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f4f5f7;
    border: 1px solid #e2e6ec;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;
}

.testimonial-prev:hover,
.testimonial-next:hover {
    background: #d6b9a8;
    color: #0d1b2e;
    border-color: #d6b9a8;
    transform: translateY(-2px);
}

.testimonial__carousel {
    position: relative;
}

.testimonial-slider {
    overflow: hidden;
    padding: 20px 10px; /* Added vertical padding for shadow visibility */
}

.testimonial__item {
    background: #fff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth transition */
    position: relative;
    overflow: hidden; /* Required for blur overlay */
    border: 1px solid rgba(0,0,0,0.03);
}

.testimonial__item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    background: #0d1b2e; /* Dark theme color on hover */
    border-color: #0d1b2e;
}

.testimonial__item:hover .testimonial__text,
.testimonial__item:hover .testimonial__name,
.testimonial__item:hover .testimonial__position,
.testimonial__item:hover .testimonial__rating i {
    color: #ffffff; /* All text white on hover */
}

.testimonial__item:hover .testimonial__rating i {
    color: #d6b9a8; /* Keep gold stars for better contrast/theme look, as they are icons not text */
}

.testimonial__item:hover .testimonial__text {
    color: #ffffff;
}

.testimonial__item:hover .testimonial__name {
    color: #ffffff;
}

.testimonial__item:hover .testimonial__position {
    color: #ffffff;
}

.testimonial__rating {
    margin-bottom: 20px;
}

.testimonial__rating i {
    color: #ffc107;
    margin-right: 3px;
}

.testimonial__text {
    flex: 1;
    font-size: 16px;
    line-height: 1.7;
    color: #4a4a4a;
    margin-bottom: 25px;
    font-style: italic;
    position: relative;
    z-index: 2;
}

.testimonial__author {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #d6b9a8;
    flex-shrink: 0;
}

.testimonial__avatar.fallback {
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d1b2e;
    font-weight: 600;
    font-size: 18px;
}

/* Active Slide - Fully Visible & Clear */
.swiper-slide-active .testimonial__item {
    opacity: 1;
    filter: none;
    transform: scale(1);
    z-index: 5;
    border-color: rgba(214, 185, 168, 0.3);
}

/* Inactive/Next Slide - Gradient Blur Effect */
.swiper-slide-next .testimonial__item {
    opacity: 0.9;
}

/* The Gradient Blur Overlay */
.swiper-slide-next .testimonial__item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.9) 100%);
    /* Mask gradient to make blur stronger from left to right */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,1) 100%);
    pointer-events: none; /* Allow clicks to pass through if needed, but usually next slide is just for preview */
    transition: opacity 0.5s ease;
}

/* Ensure active slide has no overlay */
.swiper-slide-active .testimonial__item::after {
    opacity: 0;
    pointer-events: none;
}

/* Portfolio Items Styling Fix - فقط برای صفحه portfolio.html */
.page-portfolio .portfolio__item {
    margin-bottom: 20px; /* Reduced margin for closer spacing */
    will-change: transform, opacity;
    transform: none;
    backface-visibility: hidden;
    grid-column: span 2; /* Each item spans 2 columns = 50% width */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    top: auto;
    left: auto;
    scale: 1;
    opacity: 1;
}

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

.portfolio__wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.portfolio__wrapper:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.portfolio__thumb {
    position: relative;
    overflow: hidden;
    height: 280px;
}

/* Portfolio thumb container - فقط برای صفحه portfolio.html */
.page-portfolio .portfolio__thumb {
    overflow: hidden;
    position: relative;
    height: 300px;
    background: #f4f5f7;
    border-radius: 8px;
}

/* Base image styles - فقط برای صفحه portfolio.html */
.page-portfolio .portfolio__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.3s ease;
    display: block;
    transform-origin: center top;
}

/* Auto-scroll specific styles - فقط برای صفحه portfolio.html */
.page-portfolio .portfolio__thumb img.auto-scroll {
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform-origin: center top;
    animation: none;
    transform: translateY(0%);
    will-change: transform;
    /* Ensure image stays within container bounds */
    max-width: 100%;
    overflow: hidden;
}

/* Scrolling animation state - فقط برای صفحه portfolio.html */
.page-portfolio .portfolio__thumb img.auto-scroll.scrolling {
    animation: portfolioAutoScroll 12s linear forwards;
    /* Ensure smooth animation */
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: object-position;
}

/* Completed state - stays at bottom - فقط برای صفحه portfolio.html */
.page-portfolio .portfolio__thumb img.auto-scroll.completed {
    object-position: center bottom;
    animation: none;
}

/* Reset animation state - فقط برای صفحه portfolio.html */
.page-portfolio .portfolio__thumb img.auto-scroll.resetting {
    animation: portfolioReset 0.8s ease-out forwards;
}

/* Keyframe animations */
@keyframes portfolioAutoScroll {
    0% {
        transform: translateY(0%);
        object-position: center top;
    }
    100% {
        transform: translateY(0%);
        object-position: center bottom;
    }
}

@keyframes portfolioReset {
    0% {
        object-position: center bottom;
    }
    100% {
        object-position: center top;
    }
}

/* ========================== Portfolio Luxury Label Style ========================== */
.portfolio-luxury-label {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 30px;
    border-radius: 50px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 5;
    pointer-events: none;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    box-shadow: 
        0 5px 15px rgba(0,0,0,0.2),
        inset 0 0 20px rgba(255,255,255,0.05);
    white-space: nowrap;
    opacity: 0; /* Hidden initially, shown via JS/CSS */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.portfolio__thumb:hover .portfolio-luxury-label {
    bottom: 40px;
    background: rgba(13, 27, 46, 0.6);
    border-color: #d6b9a8;
    color: #d6b9a8;
    box-shadow: 
        0 15px 30px rgba(0,0,0,0.4),
        inset 0 0 20px rgba(214, 185, 168, 0.1);
    transform: translateX(-50%) scale(1.05);
}

.portfolio-luxury-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--shine-left, -100%);
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    transform: skewX(-25deg);
    pointer-events: none;
}

/* Shine animation class (controlled by GSAP) */
.portfolio-luxury-label.visible {
    opacity: 1;
}

/* ========================== Popup Features Style (Web Design Page) ========================== */
.popup-active {
    box-shadow: 0 30px 60px rgba(0,0,0,0.3) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #d6b9a8 !important;
    z-index: 9999 !important;
}

.popup-active .feature-number {
    color: #d6b9a8 !important;
    text-shadow: 0 2px 10px rgba(214, 185, 168, 0.5);
    transform: scale(1.2);
}

.popup-active h3 {
    background: linear-gradient(135deg, #0d1b2e 0%, #d6b9a8 50%, #0d1b2e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shine 3s linear infinite;
    font-weight: 800;
    text-shadow: none;
}

.popup-active p {
    color: #333 !important;
    font-weight: 600;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* ========================== Luxury Title Animation (Services Page) ========================== */
.title-luxury {
    transform-origin: center center;
    will-change: transform, opacity;
    z-index: 9999 !important;
}

.service__area .sec-title-wrapper {
    --luxury-base: 13, 27, 46;
}

.seo__area .sec-title-wrapper {
    --luxury-base: 255, 255, 255;
}

.title-luxury .header_v2 {
    font-size: 4rem !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #0d1b2e 0%, #d6b9a8 45%, #0d1b2e 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(var(--luxury-base, 13, 27, 46), var(--luxury-fill, 0));
    color: rgba(var(--luxury-base, 13, 27, 46), var(--luxury-fill, 0));
    background-size: 200% auto;
    animation: shine 3s linear infinite;
    transition: color 0.6s ease, letter-spacing 0.6s ease, text-shadow 0.6s ease;
}

.title-luxury p {
    color: #e7d3c5 !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    max-width: 850px;
    margin: 20px auto 0;
}

.service__area .header_v2,
.seo__area .header_v2 {
    font-weight: 600 !important;
    transition: color 0.6s ease, letter-spacing 0.6s ease, text-shadow 0.6s ease;
}

/* ========================== Hero Drag & Drop Styles ========================== */
.services__hero {
    position: relative;
    overflow: hidden; /* Keep scattered items inside */
    min-height: 100vh; /* Ensure enough space */
}

.hero-scatter-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-scatter-item {
    position: absolute;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: grab;
    pointer-events: auto;
    font-weight: 600;
    font-size: 12px;
    transition: box-shadow 0.3s ease, opacity 0.3s ease;
    z-index: 10;
    user-select: none;
    white-space: nowrap;
    opacity: 0.25;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.hero-scatter-item.is-feature {
    background: rgba(214, 185, 168, 0.2);
    border-color: rgba(214, 185, 168, 0.6);
    color: #0d1b2e;
}

.hero-scatter-item.is-marketing {
    background: rgba(214, 185, 168, 0.2);
    border-color: rgba(214, 185, 168, 0.6);
    color: #f8f8f8;
}

.hero-scatter-item:hover {
    opacity: 0.8;
    z-index: 15;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.hero-scatter-item.dragging {
    cursor: grabbing;
    opacity: 1;
    z-index: 100;
    transform: scale(1.05);
}

.hero-scatter-item.placed {
    opacity: 1;
    pointer-events: none;
    box-shadow: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.hero-scatter-item.placed.is-feature {
    background: rgba(214, 185, 168, 0.3);
    border-color: #d6b9a8;
    color: #0d1b2e;
}

.hero-scatter-item.placed.is-marketing {
    background: rgba(214, 185, 168, 0.3);
    border-color: #d6b9a8;
    color: #ffffff;
}

.hero-slot {
    display: inline-block;
    min-width: 130px;
    height: 36px;
    border: 2px dashed rgba(214, 185, 168, 0.8);
    border-radius: 4px;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.15);
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(214, 185, 168, 0.25)
}

.hero-slot[data-id^="marketing"] {
    border-color: rgba(214, 185, 168, 0.8);
    box-shadow: 0 0 0 1px rgba(214, 185, 168, 0.25)
}

.hero-slot.slot-active {
    opacity: 0.55;
    animation: slotPulse 1.2s ease-in-out infinite;
    box-shadow: 0 0 0 2px rgba(214, 185, 168, 0.35)
}

.hero-slot.slot-active[data-id^="feature"] {
    background: rgba(214, 185, 168, 0.18);
    box-shadow: 0 0 0 2px rgba(214, 185, 168, 0.45)
}

.hero-slot.slot-active[data-id^="marketing"] {
    background: rgba(214, 185, 168, 0.18);
    box-shadow: 0 0 0 2px rgba(214, 185, 168, 0.45)
}

.hero-slot.hovered {
    opacity: 0.75;
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(214, 185, 168, 0.5)
}

.hero-slot.filled {
    opacity: 0;
    animation: none;
}

@media (max-width: 991px) {
    .hero-scatter-container {
        display: none
    }
}

@keyframes slotPulse {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.3; }
}

.services__hero-features, .services__hero-marketing {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
    position: relative;
    z-index: 5; /* Below draggable items initially */
}

/* Hover effects - removed conflicting hover animations */
.page-portfolio .portfolio__thumb:hover img:not(.auto-scroll) {
    transform: scale(1.08);
}

/* ========================== WORK Section Styles - فقط برای صفحه اصلی ========================== */
/* این استایل‌ها مخصوص بخش WORK در صفحه index.html هستند و از صفحه portfolio.html جدا هستند */

/* WORK Section Container */
.page-index .portfolio__area {
    padding-bottom: 140px;
    position: relative;
}

.page-index .portfolio__text {
    font-size: 120px;
    font-weight: 700;
    color: #f0f0f0;
    margin-bottom: 50px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -2px;
}

/* WORK Grid Container */
.page-index .portfolio__list-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

/* WORK Items */
.page-index .portfolio__item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    top: auto;
    left: auto;
    scale: 1;
    opacity: 1;
}

.page-index .portfolio__item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.page-index .portfolio__item a {
    display: block;
    width: 100%;
    text-decoration: none;
    position: relative;
}

.page-index .portfolio__item img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    object-position: center;
    transition: transform 0.5s ease;
}

.page-index .portfolio__item:hover img {
    transform: scale(1.1);
}

/* WORK Info */
.page-index .portfolio__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 30px 25px 25px;
    color: white;
}

.page-index .portfolio__title {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: white;
    text-transform: capitalize;
}

/* WORK Button */
.page-index .portfolio__btn {
    text-align: center;
}

/* Responsive Design for WORK Section */
@media only screen and (max-width: 1200px) {
    .page-index .portfolio__text {
        font-size: 100px;
    }
}

@media only screen and (max-width: 992px) {
    .page-index .portfolio__text {
        font-size: 80px;
    }
    
    .page-index .portfolio__list-1 {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .page-index .portfolio__item {
        min-height: 280px;
    }
}

@media only screen and (max-width: 768px) {
    .page-index .portfolio__text {
        font-size: 60px;
        margin-bottom: 30px;
    }
    
    .page-index .portfolio__item {
        min-height: 250px;
    }
    
    .page-index .portfolio__title {
        font-size: 20px;
    }
}

@media only screen and (max-width: 576px) {
    .page-index .portfolio__text {
        font-size: 40px;
    }
    
    .page-index .portfolio__item {
        min-height: 200px;
    }
    
    .page-index .portfolio__info {
        padding: 20px 15px 15px;
    }
}

/* Responsive styles for portfolio items - فقط برای صفحه portfolio.html */
@media only screen and (max-width: 768px) {
    .page-portfolio .portfolio__grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 15px; /* Reduced gap for mobile */
    }
    
    .page-portfolio .portfolio__item {
        grid-column: span 1; /* Full width on mobile */
        margin-bottom: 15px; /* Reduced margin for mobile */
    }
    
    .page-portfolio .portfolio__thumb {
        height: 200px; /* 16:9 laptop aspect ratio for mobile (single column) */
    }
    
    .page-portfolio .portfolio__thumb img.auto-scroll {
        animation-duration: 8s; /* Faster animation on mobile */
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .page-portfolio .portfolio__grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
        gap: 18px; /* Reduced gap for tablet */
    }
    
    .page-portfolio .portfolio__item {
        grid-column: span 1; /* Single column span on tablet */
        margin-bottom: 18px; /* Reduced margin for tablet */
    }
    
    .page-portfolio .portfolio__thumb {
        height: 240px; /* 16:9 laptop aspect ratio for tablet (2 columns) */
    }
}

@media only screen and (min-width: 1025px) {
    .page-portfolio .portfolio__thumb {
        height: 280px; /* 16:9 laptop monitor aspect ratio for desktop (2 columns) */
    }
}

/* Portfolio Overlay Styles - فقط برای صفحه portfolio.html */
.page-portfolio .portfolio__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(214, 185, 168, 0.95) 0%, rgba(0, 123, 255, 0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.page-portfolio .portfolio__thumb:hover .portfolio__overlay {
    opacity: 1;
}

.page-portfolio .portfolio__content {
    text-align: center;
    color: white;
    padding: 20px;
}

.page-portfolio .portfolio__title {
    font-size: 22px;
    margin-bottom: 8px;
    font-weight: 600;
    color: white;
}

.page-portfolio .portfolio__category {
    font-size: 14px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 15px;
    color: white;
}

.page-portfolio .portfolio__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.page-portfolio .portfolio__link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    color: white;
}

.portfolio__link i {
    font-size: 16px;
}

/* Responsive Grid Layout */
@media (max-width: 1199px) {
    .portfolio__thumb {
        height: 250px;
    }
}

@media (max-width: 991px) {
    .portfolio__thumb {
        height: 220px;
    }
    
    .portfolio__title {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .portfolio__thumb {
        height: 200px;
    }
    
    .portfolio__title {
        font-size: 18px;
    }
    
    .portfolio__category {
        font-size: 13px;
    }
}

.testimonial__author-info {
    flex: 1;
}

.testimonial__name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.testimonial__position {
    font-size: 14px;
    color: #666;
}

/* Responsive */
@media (max-width: 991px) {
    .testimonial__content {
        padding-right: 0;
        margin-bottom: 40px;
        text-align: center;
    }
    
    .testimonial__navigation {
        justify-content: center;
    }
    
    .testimonial-slider {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .testimonial__item {
        padding: 25px;
    }
    
    .testimonial__avatar {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .testimonial__text {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .dynamic-frame {
        width: 220px;
        height: 220px;
    }
    
    .dynamic-team-title h2 {
        font-size: 2rem;
    }
    
    .team-info h3 {
        font-size: 1.3rem;
    }
    
    .carousel-nav {
        gap: 20px;
    }
    
    .carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
}

/* Special Team Animation Styles */
.special-team-animation {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.team-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 400px;
    margin-bottom: 80px;
}

.team-member {
    position: relative;
    text-align: center;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.center-member {
    position: relative;
    z-index: 3;
    transform: scale(1.1);
}

.left-member {
    position: absolute;
    left: 10%;
    z-index: 2;
}

.right-member {
    position: absolute;
    right: 10%;
    z-index: 2;
}

.team-bottom-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bottom-member {
    flex: 0 1 300px;
    max-width: 300px;
}

/* Dynamic Frame Styles for Special Animation */
.special-team-animation .dynamic-frame {
    width: 280px;
    height: 320px;
    position: relative;
    margin: 0 auto 30px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #0d1b2e 0%, #1e2d42 100%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.frame-center {
    background: linear-gradient(135deg, #d6b9a8 0%, #b08d6b 100%);
    transform: scale(1.05);
}

.frame-left {
    background: linear-gradient(135deg, #162032 0%, #1e2d42 100%);
}

.frame-right {
    background: linear-gradient(135deg, #1e2d42 0%, #243651 100%);
}

.frame-bottom {
    background: linear-gradient(135deg, #d6b9a8 0%, #d6b9a8 100%);
    width: 250px;
    height: 280px;
}

.special-team-animation .frame-inner {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 15px;
    overflow: hidden;
    margin: 8px;
}

.special-team-animation .frame-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.special-team-animation .team-member:hover .frame-inner img {
    transform: scale(1.1);
}

.special-team-animation .team-member:hover .dynamic-frame {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.special-team-animation .center-member:hover .dynamic-frame {
    transform: scale(1.05) translateY(-10px);
}

/* Team Info Styles for Special Animation */
.special-team-animation .team-info {
    text-align: center;
}

.special-team-animation .team-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--ct-primary);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.special-team-animation .team-specialty {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
    display: block;
}

.special-team-animation .team-social {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.special-team-animation .social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ct-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
}

.special-team-animation .social-link:hover {
    background: var(--ct-accent);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Responsive Design for Special Team Animation */
@media (max-width: 768px) {
    .team-stage {
        flex-direction: column;
        min-height: auto;
        gap: 40px;
    }
    
    .left-member,
    .right-member {
        position: relative;
        left: auto;
        right: auto;
    }
    
    .center-member {
        transform: scale(1);
    }
    
    .team-bottom-row {
        gap: 30px;
    }
    
    .special-team-animation .dynamic-frame,
    .frame-bottom {
        width: 240px;
        height: 280px;
    }

    .bottom-member {
        flex: 0 1 240px;
        max-width: 240px;
    }
}

.mxd-section.padding-pre-title {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: 0;
    padding-right: 0;
}

.mxd-section.padding-pre-title .mxd-container.fullwidth-container {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0;
}

.mxd-section.padding-pre-title .marquee {
    width: 100vw;
    max-width: 100vw;
}