/* ================================================================

   LUXURY PREMIUM WEBSITE - GREEN & GOLD THEME

   ================================================================ */



:root {

    /* Premium Color Palette */

    --color-dark: #0d0d0d;

    --color-bg: #1a1a1a;

    --color-green-dark: #1a472a;

    --color-green: #2d5016;

    --color-green-light: #3a6b1f;

    --color-gold: #d4af37;

    --color-gold-light: #e8d9b5;

    --color-white: #ffffff;

    --color-text: #e8e8e8;

    --color-text-light: #b8b8b8;

    --color-accent: #4a7c2c;



    /* Typography */

    --font-serif: 'Playfair Display', serif;

    --font-sans: 'Montserrat', sans-serif;



    /* Effects */

    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    --shadow-sm: 0 2px 8px rgba(212, 175, 55, 0.1);

    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);

    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    overflow-x: hidden;

}



body {

    font-family: var(--font-sans);

    background-color: var(--color-bg);

    color: var(--color-text);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;

}



/* Typography */

h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-serif);

    font-weight: 700;

    letter-spacing: -0.5px;

}



h1 {

    font-size: 4rem;

    line-height: 1.1;

}



h2 {

    font-size: 2.8rem;

    line-height: 1.2;

}



h3 {

    font-size: 1.6rem;

}



p {

    font-size: 1rem;

    line-height: 1.8;

    font-weight: 300;

}



/* Text Colors */

.text-gold {

    color: var(--color-gold);

}



/* Gold Line */

.gold-line {

    width: 60px;

    height: 3px;

    background: linear-gradient(90deg, var(--color-gold), transparent);

    margin: 1.5rem 0;

}



.gold-line.mx-auto {

    margin-left: auto !important;

    margin-right: auto !important;

}



/* ================================================================

   NAVBAR

   ================================================================ */



.navbar-luxury {

    background: var(--color-white);

    backdrop-filter: blur(10px);

    border-bottom: 1px solid rgba(212, 175, 55, 0.15);

    padding: 0.6rem 0;

    transition: var(--transition);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    width: 100%;

    overflow: visible;

    position: relative !important;
    top: 0px;

    z-index: 1022;

}



.navbar-luxury.scrolled {

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

}



.navbar-logo-large {

    height: 65px;

    object-fit: contain;

    transition: var(--transition);

}



.navbar-brand:hover .navbar-logo-large {

    filter: brightness(0.9);

    transform: scale(1.05);

}



.nav-link {

    color: var(--color-dark) !important;

    font-weight: 500;

    margin: 0 1.5rem;

    position: relative;

    font-size: 0.95rem;

    letter-spacing: 0.5px;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: -5px;

    left: 50%;

    width: 0;

    height: 2px;

    background: var(--color-gold);

    transition: var(--transition);

    transform: translateX(-50%);

}



.nav-link:hover {

    color: var(--color-gold) !important;

}



.nav-link:hover::after {

    width: 30px;

}



.nav-link.active {

    color: var(--color-gold) !important;

}



.nav-link.active::after {

    width: 33%;

}



.btn-gold.active {

    background: var(--color-gold) !important;

    color: var(--color-dark) !important;

    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);

}



/* ================================================================

   BUTTONS

   ================================================================ */



.btn {

    font-family: var(--font-sans);

    font-weight: 600;

    letter-spacing: 0.8px;

    border-radius: 0;

    padding: 0.8rem 2.5rem;

    transition: var(--transition);

    text-transform: uppercase;

    font-size: 0.85rem;

}



.btn-gold {

    background: var(--color-gold);

    color: var(--color-dark);

    border: none;

    position: relative;

    overflow: hidden;

}



.btn-gold::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: var(--color-green);

    transition: var(--transition);

    z-index: -1;

}



/*.btn-gold:hover {

    color: var(--color-gold);

    left: 100%;

    transform: translateX(0);

}*/



.btn-gold:hover::before {

    left: 0;

}



.btn-lg {

    padding: 1rem 3rem;

    font-size: 0.9rem;

}



/* ================================================================

   HERO SECTION

   ================================================================ */



.hero-luxury {

    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-green-dark) 100%);

    position: relative;

    overflow: hidden;

    padding: 6rem 0;

/*    min-height: 80vh;*/

    display: flex;

    align-items: center;

    width: 100%;

}





.hero-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 3rem;

    align-items: center;

    position: relative;

    z-index: 2;

}



.hero-text-section {

    z-index: 2;

}



.hero-content {

    max-width: 550px;

}



.hero-label {

    font-size: 0.9rem;

    color: var(--color-gold);

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 1.5rem;

}



.gold-accent {

    font-size: 1.5rem;

    margin-right: 0.5rem;

}



.hero-title {

    font-size: 4.5rem;

    line-height: 1.1;

    margin-bottom: 1.5rem;

    font-weight: 800;

}



.hero-subtitle {

    font-size: 1.25rem;

    color: var(--color-text-light);

    font-weight: 300;

    line-height: 1.6;

    margin-bottom: 3rem;

}



.hero-stats {

    display: flex;

    gap: 3rem;

    margin-bottom: 3rem;

}



.stat {

    border-left: 2px solid var(--color-gold);

    padding-left: 1.5rem;

}



.stat-number {

    font-size: 2rem;

    color: var(--color-gold);

    font-family: var(--font-serif);

    font-weight: 700;

}



.stat-label {

    font-size: 0.85rem;

    color: var(--color-text-light);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-top: 0.5rem;

}



.hero-cta {

    display: flex;

    gap: 2rem;

    align-items: center;

}



.cta-link {

    color: var(--color-gold);

    font-weight: 600;

    letter-spacing: 0.5px;

    text-decoration: none;

    transition: var(--transition);

    font-size: 0.95rem;

}



.cta-link:hover {

    color: var(--color-gold-light);

}



.cta-link i {

    transition: var(--transition);

}



.cta-link:hover i {

    transform: translateX(4px);

}



.hero-image-section {

    position: relative;

    z-index: 1;

    display: flex;

    justify-content: center;

    align-items: center;

}



.hero-frame-wrapper {

    position: relative;

    width: 100%;

    max-width: 380px;

    aspect-ratio: 1;

    display: flex;

    align-items: center;

    justify-content: center;

}



.hero-frame-circle {

    position: relative;

    width: 100%;

    aspect-ratio: 1;

    border-radius: 50%;

    overflow: hidden;

    border: 8px solid var(--color-gold);

    box-shadow: 0 0 60px rgba(212, 175, 55, 0.4), inset 0 0 40px rgba(212, 175, 55, 0.1);

    z-index: 2;

    transition: var(--transition);

}



.hero-frame-circle:hover {

    box-shadow: 0 0 80px rgba(212, 175, 55, 0.5), inset 0 0 50px rgba(212, 175, 55, 0.15);

    transform: scale(1.03);

}



.hero-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.hero-frame-circle:hover .hero-image {

    transform: scale(1.05);

}



.hero-frame-accent {

    position: absolute;

    width: 120%;

    height: 120%;

    border-radius: 50%;

    border: 2px solid rgba(212, 175, 55, 0.3);

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    animation: float-accent 6s ease-in-out infinite;

}



@keyframes float-accent {

    0%, 100% {

        transform: translate(-50%, -50%) scale(1);

    }

    50% {

        transform: translate(-50%, -50%) scale(1.05);

    }

}



/* ================================================================

   LUXURY DIVIDER

   ================================================================ */



.luxury-divider {

    display:none !important;

/*    height: 60px;*/

    background: #1a1a1a;

    overflow: hidden;

}



.luxury-divider svg {

    width: 100%;

    height: 100%;

    display: block;

}



/* ================================================================

   SECTION HEADERS

   ================================================================ */



.section-header {

    text-align: center;

    margin-bottom: 0rem;

}



.section-title {

    font-size: 2.8rem;

    margin-bottom: 0;

    position: relative;

    display: block;

    width: 100%;

    text-align: center;

}



.section-subtitle {

    color: var(--color-text-light);

    font-size: 1.1rem;

    margin-top: 0.5rem;

    font-weight: 300;

}



/* ================================================================

   EXPERTISE SECTION

   ================================================================ */



.expertise-section {

    background: var(--color-bg);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.expertise-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);

}



.expertise-card {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2) 0%, rgba(13, 13, 13, 0.5) 100%);

    border: 1px solid rgba(212, 175, 55, 0.2);

    padding: 2.5rem;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    min-height: 380px;

}



.expertise-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);

    transition: var(--transition);

}



.expertise-card:hover {

    border-color: var(--color-gold);

    box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);

    transform: translateY(-8px);

}



.expertise-card:hover::before {

    left: 100%;

}



.card-icon {

    font-size: 3rem;

    color: var(--color-gold);

    margin-bottom: 1.5rem;

    transition: var(--transition);

}



.expertise-card:hover .card-icon {

    transform: scale(1.1) rotate(5deg);

}



.expertise-card h3 {

    font-size: 1.4rem;

    margin-bottom: 1rem;

    flex-shrink: 0;

}



.expertise-card p {

    color: var(--color-text-light);

    margin-bottom: 1.5rem;

    line-height: 1.8;

    flex-grow: 1;

}



.card-features {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: auto;

}



.feature {

    background: rgba(212, 175, 55, 0.1);

    color: var(--color-gold);

    padding: 0.4rem 0.9rem;

    font-size: 0.8rem;

    border-radius: 20px;

    font-weight: 600;

    border: 1px solid rgba(212, 175, 55, 0.2);

}



/* ================================================================

   PORTFOLIO SECTION

   ================================================================ */



.portfolio-section {

/*    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-green-dark) 100%);*/

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.portfolio-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);

}



.portfolio-card {

    position: relative;

    cursor: pointer;

    height: 100%;

    transition: var(--transition);

}



.portfolio-card.large {

    height: auto;

}



.portfolio-image {

    width: 100%;

    height: 300px;

    position: relative;

    overflow: hidden;

}



.portfolio-card.large .portfolio-image {

    height: 400px;

}



.portfolio-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.portfolio-card:hover .portfolio-image img {

    transform: scale(1.08);

}



.portfolio-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.7) 0%, rgba(212, 175, 55, 0.15) 100%);

    opacity: 0;

    transition: var(--transition);

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 2rem;

}



.portfolio-overlay h4,

.portfolio-overlay p {

    color: var(--color-white);

    margin: 0;

}



.portfolio-overlay h4 {

    font-size: 1.3rem;

    margin-bottom: 0.5rem;

    font-weight: 600;

}



.portfolio-overlay p {

    font-size: 0.95rem;

    color: rgba(255, 255, 255, 0.9);

}



.portfolio-card:hover .portfolio-overlay {

    opacity: 1;

}



/* ================================================================

   STORIES SECTION

   ================================================================ */



.stories-section {

    background: var(--color-bg);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.stories-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);

}



.story-card {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.3) 0%, rgba(13, 13, 13, 0.5) 100%);

    border: 1px solid rgba(212, 175, 55, 0.15);

    overflow: hidden;

    transition: var(--transition);

}



.story-image {

    width: 100%;

    height: 300px;

    overflow: hidden;

}



.story-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.story-card:hover .story-image img {

    transform: scale(1.08);

}



.story-content {

    padding: 2.5rem;

}



.story-content h3 {

    color: var(--color-gold) !important;

    margin-bottom: 1rem;

}



.story-content p {

    color: var(--color-text-light);

    margin-bottom: 1.5rem;

    line-height: 1.8;

}



.story-link {

    color: var(--color-gold);

    font-weight: 600;

    text-decoration: none;

    transition: var(--transition);

    font-size: 0.95rem;

}



.story-link:hover {

    color: var(--color-gold-light);

}



.story-link i {

    transition: var(--transition);

}



.story-link:hover i {

    transform: translateX(4px);

}



/* ================================================================

   ABOUT SECTION

   ================================================================ */



.about-premium {

    background: linear-gradient(180deg, var(--color-green-dark) 0%, var(--color-bg) 100%);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.about-premium::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);

}



/* Creative About Frame - Elegant & Clean */

.about-frame-wrapper {

    position: relative;

    width: 100%;

    max-width: 380px;

    margin: 0 auto;

}



.about-image-frame {

    position: relative;

    width: 100%;

    aspect-ratio: 3/4;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 15px 50px rgba(212, 175, 55, 0.2);

    transition: var(--transition);

    border: 2px solid rgba(212, 175, 55, 0.3);

}



.about-image-frame img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.frame-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(45, 80, 22, 0.08) 100%);

    z-index: 2;

    pointer-events: none;

}



/* Elegant side accent line */

.frame-accent-border {

    position: absolute;

    left: -12px;

    top: 30px;

    width: 4px;

    height: 200px;

    background: linear-gradient(180deg, var(--color-gold) 0%, rgba(212, 175, 55, 0) 100%);

    border-radius: 2px;

}



.about-premium:hover .about-image-frame {

    box-shadow: 0 20px 70px rgba(212, 175, 55, 0.3);

    border-color: rgba(212, 175, 55, 0.5);

}



.about-premium:hover .about-image-frame img {

    transform: scale(1.04);

}



.about-text {

    color: var(--color-text-light);

    margin-bottom: 1.5rem;

    line-height: 1.9;

    font-size: 1.05rem;

}



.tech-stack-title {

    font-size: 1.3rem;

    color: var(--color-gold);

    margin: 2rem 0 1rem;

    font-weight: 600;

}



.tech-stack {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;

    margin-bottom: 2rem;

}



.tech-group {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2) 0%, rgba(13, 13, 13, 0.3) 100%);

    padding: 1.5rem;

    border: 1px solid rgba(212, 175, 55, 0.2);

}



.tech-group h4 {

    color: var(--color-gold);

    font-size: 1rem;

    margin-bottom: 0.5rem;

    font-weight: 600;

}



.tech-group p {

    color: var(--color-text-light);

    font-size: 0.9rem;

    margin: 0;

}



.about-highlights {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

    margin-top: 3rem;

    padding-top: 2rem;

    border-top: 1px solid rgba(212, 175, 55, 0.2);

}



.highlight {

    text-align: center;

}



.highlight-number {

    font-size: 2rem;

    color: var(--color-gold);

    font-family: var(--font-serif);

    font-weight: 700;

    display: block;

}



.highlight-text {

    color: var(--color-text-light);

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-top: 0.5rem;

    display: block;

}



/* ================================================================

   TESTIMONIALS SECTION

   ================================================================ */



.testimonials-luxury {

    background: var(--color-bg);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.testimonials-luxury::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);

}



.testimonial-card {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2) 0%, rgba(13, 13, 13, 0.5) 100%);

    border: 1px solid rgba(212, 175, 55, 0.15);

    padding: 2.5rem;

    transition: var(--transition);

}



.testimonial-card:hover {

    border-color: var(--color-gold);

    box-shadow: 0 0 30px rgba(212, 175, 55, 0.1);

    transform: translateY(-8px);

}



.stars {

    margin-bottom: 1.5rem;

}



.stars i {

    color: var(--color-gold);

    margin-right: 0.25rem;

    font-size: 0.9rem;

}



.testimonial-text {

    color: var(--color-text-light);

    font-style: italic;

    margin-bottom: 1.5rem;

    line-height: 1.8;

}



.testimonial-author {

    padding-top: 1.5rem;

    border-top: 1px solid rgba(212, 175, 55, 0.1);

}



.testimonial-author h4 {

    color: var(--color-gold);

    margin-bottom: 0.25rem;

}



.testimonial-author p {

    color: var(--color-text-light);

    font-size: 0.85rem;

    font-weight: 300;

}



/* ================================================================

   CTA SECTION

   ================================================================ */



.cta-luxury {

    background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}





.cta-content {

    text-align: center;

    position: relative;

    z-index: 1;

    max-width: 800px;

    margin: 0 auto;

}



.cta-content h2 {

    font-size: 2.8rem;

    margin-bottom: 1rem;

}



.cta-content p {

    color: var(--color-text-light);

    font-size: 1.1rem;

    margin-bottom: 2.5rem;

    line-height: 1.8;

}



/* ================================================================

   FOOTER

   ================================================================ */



.footer-luxury {

    background: var(--color-dark);

    border-top: 1px solid rgba(212, 175, 55, 0.2);

    padding: 3rem 0 2rem;

    width: 100%;

    overflow: hidden;

}



.footer-main {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 2rem;

    padding-bottom: 2rem;

    border-bottom: 1px solid rgba(212, 175, 55, 0.2);

}



.footer-left h4 {

    color: var(--color-gold);

    margin-bottom: 0.5rem;

    font-size: 1.1rem;

}



.footer-left p {

    color: var(--color-text-light);

    font-size: 0.9rem;

    margin: 0;

}



.footer-right {

    display: flex;

    gap: 3rem;

    align-items: center;

}



.footer-links {

    display: flex;

    gap: 1.5rem;

}



.footer-links a {

    color: var(--color-text-light);

    text-decoration: none;

    transition: var(--transition);

    font-size: 0.9rem;

}



.footer-links a:hover {

    color: var(--color-gold);

}



.footer-socials {

    display: flex;

    gap: 1rem;

}



.footer-socials a {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(212, 175, 55, 0.3);

    border-radius: 50%;

    transition: var(--transition);

    color: var(--color-text-light);

    font-size: 0.85rem;

}



.footer-socials a:hover {

    background: var(--color-gold);

    color: var(--color-dark);

    border-color: var(--color-gold);

}



.footer-bottom {

    text-align: center;

    color: var(--color-text-light);

    font-size: 0.85rem;

}



.footer-bottom p {

    margin: 0.5rem 0;

}



.footer-bottom a {

    color: var(--color-gold);

    text-decoration: none;

    transition: var(--transition);

}



.footer-bottom a:hover {

    color: var(--color-gold-light);

}



/* ================================================================

   CLIENTS SECTION

   ================================================================ */



.clients-section {

    background: linear-gradient(180deg, rgba(45, 80, 22, 0.3) 0%, var(--color-bg) 100%);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

    max-width: 100vw;

}



.clients-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);

}



.clients-carousel {

    position: relative;

    overflow: hidden;

    padding: 2rem 0;

    width: 100%;

    margin: 0 auto;

/*    background: inherit;*/

    display: flex;

    align-items: center;



/*  24-03-2026  */



    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);

}



.clients-track {

    display: flex;

    gap: 3rem;

    animation: scroll-clients 50s linear infinite;

    will-change: transform;

    flex-wrap: nowrap;

}



.client-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    min-width: 220px;

/*    opacity: 0.7;*/

    transition: opacity 0.3s ease, filter 0.3s ease;

}



.client-logo img {

    height: 50px;

    width: auto;

    max-width: 200px;

/*    filter: grayscale(100%) brightness(0.8);*/

    transition: filter 0.3s ease;

}



.client-logo:hover {

    opacity: 1;

}



.client-logo:hover img {

    filter: grayscale(0%) brightness(1.1);

}



@keyframes scroll-clients {

    0% {

        transform: translateX(0px);

    }

    100% {

        transform: translateX(-2432px);

    }

}



/* ================================================================

   BLOGS SECTION

   ================================================================ */



.blogs-section {

    background: var(--color-bg);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.blogs-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);

}



.blog-card {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2) 0%, rgba(13, 13, 13, 0.5) 100%);

    border: 1px solid rgba(212, 175, 55, 0.15);

    overflow: hidden;

    transition: var(--transition);

    display: flex;

    flex-direction: column;

    height: 100%;

}



.blog-card:hover {

    border-color: var(--color-gold);

    box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);

    transform: translateY(-8px);

}



.blog-image {

    position: relative;

    width: 100%;

/*    height: 250px;*/

    overflow: hidden;

}



.blog-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.blog-card:hover .blog-image img {

    transform: scale(1.08);

}



.blog-category {

    position: absolute;

    top: 1.5rem;

    right: 1.5rem;

    background: var(--color-gold);

    color: var(--color-dark);

    padding: 0.4rem 1rem;

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    border-radius: 4px;

    z-index: 2;

}



.blog-content {

    padding: 2rem;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.blog-content h3 {

    font-size: 1.3rem;

    margin-bottom: 1rem;

    color: var(--color-white);

}



.blog-content p {

    color: var(--color-text-light);

    margin-bottom: 1.5rem;

    flex-grow: 1;

    line-height: 1.8;

    font-size: 0.95rem;

}



.blog-link {

    color: var(--color-gold);

    font-weight: 600;

    text-decoration: none;

    transition: var(--transition);

    font-size: 0.95rem;

    display: inline-flex;

    align-items: center;

    width: fit-content;

}



.blog-link:hover {

    color: var(--color-gold-light);

}



.blog-link i {

    transition: var(--transition);

}



.blog-link:hover i {

    transform: translateX(4px);

}



.blogs-cta {

    padding-top: 2rem;

}



/* ================================================================

   PAGE HEADERS

   ================================================================ */



.page-header {

    background: linear-gradient(135deg, var(--color-green-dark) 0%, var(--color-bg) 100%);

    padding: 4rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}





.page-title {

    font-size: 3.5rem;

    margin-bottom: 1rem;

    position: relative;

    z-index: 2;

}



.page-subtitle {

    font-size: 1.25rem;

    color: var(--color-text-light);

    position: relative;

    z-index: 2;

}



/* ================================================================

   BLOGS & STORIES LISTING

   ================================================================ */



.blogs-listing-section,

.stories-listing-section {

    background: var(--color-bg);

    padding: 4rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.stories-listing-section {

    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-green-dark) 20%);

}



/* ================================================================

   ARTICLE/STORY SINGLE PAGE

   ================================================================ */



.article-header {

    background: linear-gradient(135deg, var(--color-green-dark) 0%, var(--color-bg) 100%);

    padding: 4rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.article-header-content {

    position: relative;

    z-index: 2;

}



.blog-category-badge {

    display: inline-block;

    background: var(--color-gold);

    color: var(--color-dark);

    padding: 0.5rem 1.2rem;

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    border-radius: 4px;

/*    margin-bottom: 1.5rem;*/

}



.article-meta {

    display: flex;

    gap: 2rem;

    margin-top: 1.5rem;

    flex-wrap: wrap;

}



.article-meta span {

    font-size: 0.95rem;

    color: var(--color-text-light);

}



.article-featured-image {

    width: 100%;

    overflow: hidden;

    max-height: 500px;

}



.article-featured-image img {

    width: 100%;

/*    height: 100%;*/

    object-fit: cover;

}



.article-content {

    background: var(--color-bg);

    padding: 4rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.blog-article {

    line-height: 1.9;

}



.blog-article h2 {

    font-size: 1.8rem;

    margin-top: 2.5rem;

    margin-bottom: 1rem;

/*    color: var(--color-gold);*/

}



.blog-article p {

    margin-bottom: 1.5rem;

    color: var(--color-text-light);

    font-size: 1.05rem;

}



.blog-article strong {

    color: var(--color-gold);

}



.article-cta {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.3) 0%, rgba(212, 175, 55, 0.1) 100%);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 8px;

}



.article-cta h4 {

    color: var(--color-gold);

    margin-bottom: 0.5rem;

}



.related-articles {

    margin-top: 3rem;

}



.related-card {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2) 0%, rgba(13, 13, 13, 0.3) 100%);

    border: 1px solid rgba(212, 175, 55, 0.15);

    overflow: hidden;

    transition: var(--transition);

}



.related-card:hover {

    border-color: var(--color-gold);

    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);

}



.related-card img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    transition: var(--transition);

}



.related-card:hover img {

    transform: scale(1.08);

}



.related-content {

    padding: 1.5rem;

}



.related-content .category {

    display: inline-block;

    background: rgba(212, 175, 55, 0.1);

    color: var(--color-gold);

    padding: 0.3rem 0.8rem;

    font-size: 0.75rem;

    font-weight: 700;

    border-radius: 3px;

/*    margin-bottom: 0.5rem;*/

}



.related-content h5 {

    font-size: 1.05rem;

    margin-bottom: 0.8rem;

    color: var(--color-white);

}



.read-link {

    color: var(--color-gold);

    text-decoration: none;

    font-weight: 600;

    font-size: 0.9rem;

    transition: var(--transition);

}



.read-link:hover {

    color: var(--color-gold-light);

}



.story-date {

    display: inline-block;

    color: var(--color-gold);

    font-size: 0.9rem;

    margin-bottom: 0.5rem;

}



/* ================================================================

   CONTACT PAGE

   ================================================================ */



.contact-section {

    background: var(--color-bg);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.contact-info h3 {

    color: var(--color-gold);

    font-size: 1.8rem;

}



.contact-item {

    display: flex;

    gap: 1.5rem;

    align-items: flex-start;

}



.contact-icon {

    font-size: 1.5rem;

    color: var(--color-gold);

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(212, 175, 55, 0.1);

    border-radius: 8px;

    flex-shrink: 0;

}



.contact-details h5 {

    color: var(--color-white);

    font-weight: 600;

    margin-bottom: 0.5rem;

}



.contact-details a,

.contact-details p {

    color: var(--color-text-light);

    text-decoration: none;

    transition: var(--transition);

}



.contact-details a:hover {

    color: var(--color-gold);

}



.social-links a {

    display: inline-block;

    margin-right: 1.5rem;

    margin-bottom: 0.5rem;

    color: var(--color-gold);

    text-decoration: none;

    font-weight: 600;

    transition: var(--transition);

}



.social-links a:hover {

    color: var(--color-gold-light);

}



.contact-form-wrapper {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2) 0%, rgba(13, 13, 13, 0.3) 100%);

    border: 1px solid rgba(212, 175, 55, 0.2);

    padding: 2.5rem;

    border-radius: 8px;

}



.contact-form-wrapper h3 {

    color: var(--color-gold);

    font-size: 1.8rem;

}



.form-control,

.form-select {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(212, 175, 55, 0.2);

    color: var(--color-text);

    padding: 0.75rem 1rem;

    font-size: 0.95rem;

    transition: var(--transition);

}



.form-control:focus,

.form-select:focus {

    background: rgba(255, 255, 255, 0.08);

    border-color: var(--color-gold);

    color: var(--color-text);

    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.15);

}



.form-control::placeholder {

    color: var(--color-text-light);

}



.form-label {

    color: var(--color-text);

    font-weight: 600;

    margin-bottom: 0.5rem;

    font-size: 0.95rem;

}



.form-check-label {

    color: var(--color-text-light);

    margin-left: 0.5rem;

}



.form-check-input {

    background-color: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(212, 175, 55, 0.2);

    width: 1.25rem;

    height: 1.25rem;

}



.form-check-input:checked {

    background-color: var(--color-gold);

    border-color: var(--color-gold);

}



.form-check-input:focus {

    border-color: var(--color-gold);

    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);

}



/* ================================================================

   FAQ SECTION

   ================================================================ */



.faq-section {

    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-green-dark) 50%);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.accordion-button {

    background: transparent;

    border: 1px solid rgba(212, 175, 55, 0.2);

    color: var(--color-text);

    font-weight: 600;

    transition: var(--transition);

}



.accordion-button:not(.collapsed) {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.3) 0%, rgba(212, 175, 55, 0.1) 100%);

    border-color: var(--color-gold);

    color: var(--color-gold);

}



.accordion-button:focus {

    border-color: var(--color-gold);

    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.15);

}



.accordion-button::after {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d4af37' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");

}



.accordion-body {

    background: rgba(13, 13, 13, 0.5);

    border-top: 1px solid rgba(212, 175, 55, 0.2);

    color: var(--color-text-light);

    line-height: 1.8;

}



.faq-item {

    margin-bottom: 1rem;

    background: transparent;

}



/* ================================================================

   PAGINATION

   ================================================================ */



.pagination-wrapper {

    display: flex;

    justify-content: center;

    margin-top: 4rem;

}



.pagination {

    display: flex;

    gap: 0.5rem;

    list-style: none;

    padding: 0;

    margin: 0;

}



.page-item {

    display: flex;

}



.page-link {

    display: block;

    padding: 0.75rem 1rem;

    background: transparent;

    border: 1px solid rgba(212, 175, 55, 0.3);

    color: var(--color-text);

    text-decoration: none;

    transition: var(--transition);

    font-weight: 500;

    min-width: 45px;

    text-align: center;

    border-radius: 3px;

}



.page-link:hover:not(.disabled) {

    background: rgba(212, 175, 55, 0.1);

    border-color: var(--color-gold);

    color: var(--color-gold);

}



.page-item.active .page-link {

    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.15) 100%);

    border-color: var(--color-gold);

    color: var(--color-gold);

}



.page-item.disabled .page-link {

    opacity: 0.5;

    cursor: not-allowed;

}



/* ================================================================

   ARTICLE SIDEBAR & WIDGETS

   ================================================================ */



.article-sidebar {

    position: sticky;

    top: 20px !important;

}



.toc-widget,

.share-widget,

.author-widget,

.newsletter-widget {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.15) 0%, rgba(13, 13, 13, 0.2) 100%);

    border: 1px solid rgba(212, 175, 55, 0.15);

    border-radius: 8px;

    padding: 1.5rem;

    margin-bottom: 2rem;

}



.toc-title,

.widget-title {

    color: var(--color-gold);

    font-size: 1.1rem;

    font-weight: 600;

    margin-bottom: 1rem;

    display: flex;

    align-items: center;

}



.toc-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.toc-list > li {

    margin-bottom: 0.75rem;

}



.toc-list > li > a {

    color: var(--color-text);

    text-decoration: none;

    font-size: 0.95rem;

    transition: var(--transition);

    display: inline-block;

}



.toc-list > li > a:hover {

    color: var(--color-gold);

    padding-left: 5px;

}



.toc-list ul {

    list-style: none;

    padding-left: 1.5rem;

    margin-top: 0.5rem;

}



.toc-list ul li {

    margin-bottom: 0.5rem;

}



.toc-list ul li a {

    color: var(--color-text-light);

    font-size: 0.9rem;

}



.toc-list ul li a:hover {

    color: var(--color-gold);

}



/* Share Buttons */

.share-buttons {

    display: flex;

    gap: 1rem;

    margin-top: 1rem;

}



.share-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    border: 1px solid rgba(212, 175, 55, 0.3);

    color: var(--color-text);

    text-decoration: none;

    transition: var(--transition);

    font-size: 1.1rem;

}



.share-btn:hover {

    background: rgba(212, 175, 55, 0.15) !important;

    border-color: var(--color-gold) !important;

    color: var(--color-gold) !important;

    transform: translateY(-3px) !important;

}



.share-btn.linkedin:hover {

    border-color: #0a66c2;

    color: #0a66c2;

}



.share-btn.twitter:hover {

    border-color: #1da1f2;

    color: #1da1f2;

}



.share-btn.facebook:hover {

    border-color: #1877f2;

    color: #1877f2;

}



.share-btn.email:hover {

    border-color: var(--color-gold);

    color: var(--color-gold);

}



/* Author Card */

.author-card {

    text-align: center;

}



.author-image {

    width: 100%;

    max-width: 150px;

    height: 150px;

    border-radius: 50%;

    object-fit: cover;

    margin-bottom: 1rem;

    border: 2px solid rgba(212, 175, 55, 0.3);

    transition: var(--transition);

}



.author-card:hover .author-image {

    border-color: var(--color-gold);

    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);

}



.author-card h5 {

    color: var(--color-white);

    font-size: 1.1rem;

    margin-bottom: 0.5rem;

}



.author-title {

    color: var(--color-gold);

    font-weight: 600;

    font-size: 0.9rem;

    margin-bottom: 0.5rem;

}



.author-bio {

    color: var(--color-text-light);

    font-size: 0.9rem;

    line-height: 1.6;

    margin-bottom: 1rem;

}



/* Newsletter Form */

.newsletter-form {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.form-control-sm {

    padding: 0.6rem 0.8rem;

    font-size: 0.9rem;

}



/* ================================================================

   ABOUT PAGE

   ================================================================ */



.about-section-full {

    background: var(--color-bg);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.about-frame-wrapper {

    position: relative;

    height: 100%;

    min-height: 500px;

}



.about-image-frame {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 8px;

}



.about-image-frame img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.about-image-frame:hover img {

    transform: scale(1.05);

}



.frame-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);

    pointer-events: none;

}



.frame-accent-border {

    position: absolute;

    top: 20px;

    left: 20px;

    right: -20px;

    bottom: -20px;

    border: 2px solid rgba(212, 175, 55, 0.3);

    border-radius: 8px;

    pointer-events: none;

}



.about-text {

    font-size: 1.05rem;

    line-height: 1.8;

    color: var(--color-text);

    margin-bottom: 1.5rem;

}



.about-stats {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

    margin-top: 3rem;

}



.stat-box {

    text-align: center;

    padding: 2rem 1rem;

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.15) 0%, rgba(212, 175, 55, 0.08) 100%);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 8px;

    transition: var(--transition);

}



.stat-box:hover {

    border-color: var(--color-gold);

    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.1);

    transform: translateY(-5px);

}



.stat-box h4 {

    color: var(--color-gold);

    font-size: 2.5rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

}



.stat-box p {

    color: var(--color-text-light);

    font-size: 0.95rem;

    margin: 0;

}



/* Philosophy Section */

.philosophy-section {

    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-green-dark) 50%);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.philosophy-card {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2) 0%, rgba(13, 13, 13, 0.3) 100%);

    border: 1px solid rgba(212, 175, 55, 0.15);

    padding: 2.5rem;

    border-radius: 8px;

    text-align: center;

    transition: var(--transition);

    height: 100%;

}



.philosophy-card:hover {

    border-color: var(--color-gold);

    box-shadow: 0 12px 40px rgba(212, 175, 55, 0.15);

    transform: translateY(-8px);

}



.philosophy-icon {

    font-size: 3rem;

    color: var(--color-gold);

    margin-bottom: 1.5rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 80px;

    height: 80px;

    background: rgba(212, 175, 55, 0.1);

    border-radius: 50%;

}



.philosophy-card h3 {

    color: var(--color-white);

    font-size: 1.4rem;

    margin-bottom: 1rem;

}



.philosophy-card p {

    color: var(--color-text-light);

    font-size: 0.95rem;

    line-height: 1.7;

    margin: 0;

}



/* Skills Section */

.skills-section {

    background: var(--color-bg);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.expertise-group {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.25) 0%, rgba(13, 13, 13, 0.35) 100%);

    border: 2px solid rgba(212, 175, 55, 0.2);

    padding: 2.5rem;

    border-radius: 12px;

    backdrop-filter: blur(10px);

    transition: var(--transition);

}



.expertise-group:hover {

    border-color: rgba(212, 175, 55, 0.4);

    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.1);

}



.expertise-title {

    color: var(--color-gold);

    font-size: 1.3rem;

    font-weight: 700;

    margin-bottom: 2rem;

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.expertise-title i {

    font-size: 1.5rem;

}



.skills-list {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    justify-content: center;

    align-items: center;

}



.skill-tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(45, 80, 22, 0.15) 100%);

    border: 2px solid rgba(212, 175, 55, 0.3);

    color: var(--color-text);

    padding: 0.75rem 1.4rem;

    border-radius: 25px;

    font-size: 0.9rem;

    font-weight: 500;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

    white-space: nowrap;

}



.skill-tag::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: rgba(212, 175, 55, 0.1);

    transition: left 0.3s ease;

    z-index: -1;

}



.skill-tag:hover {

    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(45, 80, 22, 0.25) 100%);

    border-color: var(--color-gold);

    color: var(--color-gold);

    transform: scale(1.1);

    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.2);

}



/* Timeline Section */

.journey-section {

    background: linear-gradient(180deg, var(--color-green-dark) 0%, var(--color-bg) 50%);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



/* Modern Timeline */

.journey-progress-bar {

    display: none;

}



.progress-track {

    position: relative;

    width: 100%;

    height: 100%;

}



.progress-fill {

    height: 100%;

    background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold) 100%);

    width: 100%;

    border-radius: 2px;

}



/* Modern Timeline Cards Grid */

.modern-timeline {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

}



.milestone-card {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.3) 0%, rgba(13, 13, 13, 0.4) 100%);

    border: 2px solid rgba(212, 175, 55, 0.2);

    border-radius: 16px;

    padding: 2.5rem;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    backdrop-filter: blur(10px);

}



.milestone-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--color-gold) 0%, transparent 100%);

}





.milestone-card > * {

    position: relative;

    z-index: 1;

}



.milestone-card:hover {

    border-color: var(--color-gold);

    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.2);

    transform: translateY(-12px);

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.4) 0%, rgba(13, 13, 13, 0.5) 100%);

}



.milestone-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 1.5rem;

}



.milestone-year {

    font-size: 2.2rem;

    font-weight: 800;

    color: var(--color-gold);

    font-family: var(--font-serif);

}



.milestone-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(45, 80, 22, 0.2) 100%);

    border-radius: 12px;

    color: var(--color-gold);

    font-size: 1.8rem;

}



.milestone-body {

    flex-grow: 1;

    margin-bottom: 1.5rem;

}



.milestone-body h4 {

    color: var(--color-white);

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 0.75rem;

}



.milestone-body p {

    color: var(--color-text-light);

    font-size: 0.9rem;

    line-height: 1.6;

    margin: 0;

}



.milestone-progress {

    padding-top: 1rem;

    border-top: 1px solid rgba(212, 175, 55, 0.1);

}



.progress-label {

    display: inline-block;

    background: rgba(212, 175, 55, 0.1);

    color: var(--color-gold);

    padding: 0.5rem 1rem;

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



/* ================================================================

   ABOUT PAGE - ENHANCED DESIGN

   ================================================================ */



/* Hero Stats Bar */

.hero-stats-bar {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 1.5rem;

    margin-bottom: 3rem;

}



.stat-col {

    display: flex;

}



.stat-pill {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    width: 100%;

    padding: 1.5rem;

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.3) 0%, rgba(13, 13, 13, 0.25) 100%);

    border: 2px solid rgba(212, 175, 55, 0.25);

    border-radius: 12px;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

    backdrop-filter: blur(8px);

}





.stat-pill > * {

    position: relative;

    z-index: 1;

}



.stat-pill:hover {

    border-color: var(--color-gold);

    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.2);

    transform: translateY(-8px);

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.4) 0%, rgba(13, 13, 13, 0.35) 100%);

}



.pill-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    background: rgba(212, 175, 55, 0.15);

    border-radius: 50%;

    color: var(--color-gold);

    font-size: 1.8rem;

    flex-shrink: 0;

}



.pill-content {

    flex-grow: 1;

}



.pill-number {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--color-gold);

    line-height: 1;

}



.pill-text {

    font-size: 0.85rem;

    color: var(--color-text-light);

    margin-top: 0.3rem;

}



/* Hero Content */

/*.hero-content-wrapper {

    padding: 2rem 0;

}*/



/* Hero Row Gap Adjustment */

.about-hero-section .row {

    gap: 1rem !important;

    align-items: stretch !important;

    flex-wrap: nowrap !important;

}



.about-hero-section .col-lg-6 {

    flex: 0 0 calc(50% - 0.5rem) !important;

    max-width: calc(50% - 0.5rem) !important;

    display: flex;

    align-items: center;

}



.about-hero-section .col-lg-6:first-child {

    align-items: flex-start;

}



/* Center image column vertically and horizontally */

.about-hero-section .col-lg-6:last-child {

    justify-content: center;

}



.hero-main-title {

    font-size: 3.2rem;

    line-height: 1.25;

    color: var(--color-white);

    margin-bottom: 1.5rem;

    font-weight: 800;

    font-family: var(--font-serif);

}



.hero-subtitle {

    font-size: 1.15rem;

    line-height: 1.8;

    color: var(--color-text-light);

    margin-bottom: 2rem;

    font-weight: 300;

}



/* Value Props */

.hero-value-props {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    margin-bottom: 2rem;

}



.value-prop {

    display: flex;

    align-items: center;

    gap: 1rem;

    font-size: 1rem;

    color: var(--color-text);

}



.value-prop i {

    color: var(--color-gold);

    font-size: 1.2rem;

    flex-shrink: 0;

}



/* CTA Buttons */

.hero-cta-buttons {

    display: flex;

    gap: 1.5rem;

    flex-wrap: wrap;

}



.hero-cta-buttons .btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



/* Trust Statement */

.trust-statement {

    font-size: 0.95rem;

    color: var(--color-text-light);

    margin: 0 !important;

    padding-top: 1rem;

/*    border-top: 1px solid rgba(212, 175, 55, 0.2);*/

    display: flex;

    align-items: center;

}



.trust-statement i {

    color: var(--color-gold);

    font-size: 1.1rem;

}



/* Hero Image Wrapper */

.hero-image-wrapper {

    position: relative;

    width: 100%;

    height: 450px;

    overflow: hidden;

}



.hero-image-frame {

    position: relative;

    width: 100%;

    height: 450px;

    overflow: hidden;

    border-radius: 12px;

}



.hero-image-frame img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.hero-image-frame:hover img {

    transform: scale(1.05);

}



.hero-image-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.3) 0%, rgba(212, 175, 55, 0.15) 100%);

    pointer-events: none;

}



.hero-accent-shape {

    position: absolute;

    top: -30px;

    right: -30px;

    width: 200px;

    height: 200px;

    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

}



/* Achievement Cards */

.achievement-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1.25rem 1.5rem;

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.3) 0%, rgba(13, 13, 13, 0.4) 100%);

    border: 1px solid rgba(212, 175, 55, 0.3);

    border-radius: 12px;

    backdrop-filter: blur(10px);

    animation: floatAchievement 3s ease-in-out infinite;

}



.achievement-card.card-1 {

    bottom: 40px;

    left: 10px;

    animation-delay: 0s;

}



.achievement-card.card-2 {

    top: 50px;

    right: 10px;

    animation-delay: 1.5s;

}



@keyframes floatAchievement {

    0%, 100% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-15px);

    }

}



.achievement-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    background: rgba(212, 175, 55, 0.2);

    border-radius: 50%;

    color: var(--color-gold);

    font-size: 1.5rem;

    flex-shrink: 0;

}



.achievement-label {

    font-size: 0.75rem;

    color: var(--color-text-light);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 0.3rem;

}



.achievement-value {

    font-size: 1.1rem;

    color: var(--color-gold);

    font-weight: 700;

}



.about-label {

    display: inline-block;

    color: var(--color-gold);

    font-size: 0.85rem;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 0.5rem;

}



.about-text-lead {

    font-size: 1.15rem;

    line-height: 1.8;

    color: var(--color-white);

    margin-bottom: 1.5rem;

    font-weight: 500;

}



.about-quick-stats {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.quick-stat {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    padding: 1rem 1.5rem;

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.15) 0%, rgba(212, 175, 55, 0.08) 100%);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 8px;

}



.stat-number {

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--color-gold);

    min-width: 80px;

}



.stat-label {

    font-size: 0.95rem;

    color: var(--color-text-light);

    line-height: 1.4;

}



.about-hero-section {

    background: linear-gradient(180deg, var(--color-bg) 0%, rgba(45, 80, 22, 0.15) 100%);

    padding: 6rem 0 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}





/* Why Work With Me Section */

.why-work-section {

    background: linear-gradient(180deg, var(--color-green-dark) 0%, var(--color-bg) 50%);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.why-card {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.35) 0%, rgba(13, 13, 13, 0.45) 100%);

    border: 2px solid rgba(212, 175, 55, 0.2);

    padding: 2.5rem 2rem;

    border-radius: 12px;

    text-align: center;

    transition: var(--transition);

    height: 100%;

    position: relative;

    overflow: hidden;

    backdrop-filter: blur(10px);

}



.why-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, var(--color-gold) 0%, transparent 100%);

}





.why-card:hover {

    border-color: var(--color-gold);

    box-shadow: 0 15px 50px rgba(212, 175, 55, 0.2);

    transform: translateY(-12px);

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.45) 0%, rgba(13, 13, 13, 0.55) 100%);

}



.why-icon {

    font-size: 2.5rem;

    color: var(--color-gold);

    margin-bottom: 1.5rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 70px;

    height: 70px;

    background: rgba(212, 175, 55, 0.1);

    border-radius: 50%;

    transition: var(--transition);

}



.why-card:hover .why-icon {

    background: rgba(212, 175, 55, 0.2);

    transform: scale(1.1);

}



.why-card h4 {

    color: var(--color-white);

    font-size: 1.25rem;

    margin-bottom: 1rem;

    font-weight: 700;

}



.why-card p {

    color: var(--color-text-light);

    font-size: 0.95rem;

    line-height: 1.7;

    margin: 0;

}



/* Services Offered Section */

.services-offered-section {

    background: var(--color-bg);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.service-card {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.3) 0%, rgba(13, 13, 13, 0.35) 100%);

    border: 2px solid rgba(212, 175, 55, 0.2);

    border-radius: 12px;

    padding: 2.5rem;

    transition: var(--transition);

    height: 100%;

    display: flex;

    flex-direction: column;

    position: relative;

    overflow: hidden;

    backdrop-filter: blur(10px);

}





.service-card > * {

    position: relative;

    z-index: 1;

}



.service-card:hover {

    border-color: var(--color-gold);

    box-shadow: 0 20px 60px rgba(212, 175, 55, 0.2);

    transform: translateY(-12px);

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.4) 0%, rgba(13, 13, 13, 0.45) 100%);

}



.service-header {

    margin-bottom: 1.5rem;

    display: flex;

    align-items: flex-start;

    gap: 1.5rem;

}



.service-header i {

    font-size: 2.5rem;

    color: var(--color-gold);

    margin-top: 0.5rem;

}



.service-header h4 {

    color: var(--color-white);

    font-size: 1.2rem;

    margin: 0;

    font-weight: 700;

}



.service-content {

    flex-grow: 1;

    margin-bottom: 1.5rem;

}



.service-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.service-list li {

    color: var(--color-text-light);

    font-size: 0.95rem;

    padding: 0.6rem 0;

    line-height: 1.6;

}



.service-link {

    color: var(--color-gold);

    text-decoration: none;

    font-weight: 600;

    font-size: 0.95rem;

    transition: var(--transition);

    display: inline-flex;

    align-items: center;

}



.service-link:hover {

    color: var(--color-gold-light);

    padding-left: 5px;

}



/* Core Values Section */

.core-values-section {

    background: linear-gradient(135deg, var(--color-green-dark) 0%, rgba(45, 80, 22, 0.8) 50%, var(--color-dark) 100%);

    padding: 7rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}





.core-values-section .section-title {

    position: relative;

    z-index: 1;

}



.value-card {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.4) 0%, rgba(13, 13, 13, 0.6) 100%);

    border: 2px solid rgba(212, 175, 55, 0.25);

    padding: 3rem 2.5rem;

    border-radius: 16px;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

    backdrop-filter: blur(10px);

    min-height: 320px;

    display: flex;

    flex-direction: column;

}



.value-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, var(--color-gold) 0%, transparent 100%);

}



.value-card::after {

    content: '';

    position: absolute;

    top: -1px;

    right: -1px;

    width: 200px;

    height: 200px;

    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);

    border-radius: 50%;

    z-index: 0;

}



.value-card:hover {

    border-color: var(--color-gold);

    box-shadow: 0 20px 60px rgba(212, 175, 55, 0.2);

    transform: translateY(-12px);

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.5) 0%, rgba(13, 13, 13, 0.7) 100%);

}



.value-number {

    font-size: 5.5rem;

    font-weight: 700;

    color: rgba(212, 175, 55, 0.3);

    margin-bottom: -1rem;

    font-family: var(--font-serif);

    line-height: 1;

    position: relative;

    z-index: 1;

}



.value-card h4 {

    color: var(--color-gold);

    font-size: 1.4rem;

    margin-bottom: 1rem;

    font-weight: 700;

    position: relative;

    z-index: 1;

}



.value-card p {

    color: var(--color-text-light);

    font-size: 0.95rem;

    line-height: 1.8;

    margin: 0;

    position: relative;

    z-index: 1;

    flex-grow: 1;

}



/* Expertise Showcase Section */

.expertise-showcase-section {

    background: linear-gradient(180deg, var(--color-bg) 0%, rgba(45, 80, 22, 0.4) 100%);

    padding: 7rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}





.expertise-showcase-section .section-title {

    position: relative;

    z-index: 1;

}



/* Trust Section */

.trust-section {

    background: linear-gradient(180deg, var(--color-green-dark) 0%, var(--color-bg) 50%);

    padding: 6rem 0;

    position: relative;

    overflow: hidden;

    width: 100%;

}



.trust-badge {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.3) 0%, rgba(13, 13, 13, 0.3) 100%);

    border: 2px solid rgba(212, 175, 55, 0.2);

    border-radius: 12px;

    padding: 2.5rem;

    text-align: center;

    transition: var(--transition);

    height: 100%;

    position: relative;

    overflow: hidden;

    backdrop-filter: blur(10px);

}





.trust-badge > * {

    position: relative;

    z-index: 1;

}



.trust-badge:hover {

    border-color: var(--color-gold);

    box-shadow: 0 16px 50px rgba(212, 175, 55, 0.2);

    transform: translateY(-10px);

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.4) 0%, rgba(13, 13, 13, 0.4) 100%);

}



.trust-stat h3 {

    color: var(--color-gold);

    font-size: 2.8rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

}



.trust-stat p {

    color: var(--color-text-light);

    font-size: 1rem;

    margin: 0;

    font-weight: 600;

}



.trust-description {

    color: var(--color-text-light);

    font-size: 0.95rem;

    line-height: 1.6;

    margin-top: 1.5rem;

    margin-bottom: 0;

}



/* About CTA Styling */

.about-cta {

    text-align: center;

}



.cta-buttons {

    display: flex;

    gap: 1.5rem;

    justify-content: center;

    margin-top: 2rem;

    flex-wrap: wrap;

}



.btn-outline-gold {

    background: transparent;

    border: 2px solid var(--color-gold);

    color: var(--color-gold);

    transition: var(--transition);

}



.btn-outline-gold:hover {

    background: var(--color-gold);

    color: var(--color-dark);

}



.section-subtitle {

    color: var(--color-text-light);

    font-size: 1.05rem;

    margin-top: 0.5rem;

    margin-bottom: 2rem;

    display: block;

    width: 100%;

}



/* Tech Logo Cloud */

.expertise-subtitle {

    color: var(--color-text-light);

    font-size: 1.1rem;

    margin-top: -1.5rem;

    margin-bottom: 3rem;

    font-weight: 500;

}



.tech-logo-cloud {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: 2rem;

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

}



.tech-logo {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    padding: 1.5rem;

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.3) 0%, rgba(13, 13, 13, 0.4) 100%);

    border: 2px solid rgba(212, 175, 55, 0.25);

    border-radius: 16px;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

    backdrop-filter: blur(10px);

    min-width: 140px;

    min-height: 140px;

    cursor: pointer;

}



.tech-logo::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.1) 0%, transparent 70%);

    opacity: 0;

    transition: opacity var(--transition);

    pointer-events: none;

}



.tech-logo:hover::before {

    opacity: 1;

}



.tech-logo i {

    font-size: 3.5rem;

    color: var(--color-gold);

    transition: var(--transition);

}



.tech-logo-svg {

    width: 3.5rem;

    height: 3.5rem;

    transition: var(--transition);

}



.tech-logo span {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--color-text);

    text-align: center;

    transition: var(--transition);

}



.tech-logo:hover {

    border-color: var(--color-gold);

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.5) 0%, rgba(13, 13, 13, 0.6) 100%);

    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.25);

    transform: translateY(-12px) scale(1.08);

}



.tech-logo:hover i,

.tech-logo:hover .tech-logo-svg {

    color: var(--color-gold);

    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));

    transform: scale(1.15);

}



.tech-logo:hover span {

    color: var(--color-gold);

}



/* Varied sizing for cloud effect */

.tech-logo:nth-child(3n) {

    min-width: 150px;

    min-height: 150px;

}



.tech-logo:nth-child(5n) {

    min-width: 130px;

    min-height: 130px;

}



.tech-logo:nth-child(7n) {

    min-width: 160px;

    min-height: 160px;

}



/* ================================================================

   RESPONSIVE DESIGN

   ================================================================ */



/* Limit fluid layout to 1600px max-width on large screens */

@media (min-width: 1601px) {

    .container-fluid {

        max-width: 1600px;

        margin-left: auto;

        margin-right: auto;

    }



    .container-fluid.px-5 {

        padding-left: 3rem !important;

        padding-right: 3rem !important;

    }

}



@media (max-width: 1200px) {

    h1 {

        font-size: 3rem;

    }



    h2 {

        font-size: 2.2rem;

    }



    .hero-title {

        font-size: 3.5rem;

    }

}



@media (max-width: 1024px) {

    .hero-wrapper {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .hero-frame-wrapper {

        max-width: 300px;

    }



    .hero-main-title {

        font-size: 2.5rem;

    }



    .hero-image-wrapper {

        height: 400px;

    }



    .hero-image-frame {

        height: 400px;

    }



    .achievement-card {

        padding: 1rem 1.25rem;

        font-size: 0.85rem;

    }



    .achievement-card.card-1 {

        bottom: 30px;

        left: 15px;

    }



    .achievement-card.card-2 {

        top: 30px;

        right: 15px;

    }



    .achievement-icon {

        width: 40px;

        height: 40px;

        font-size: 1.2rem;

    }



    /* About highlights responsive - 2 columns at 1024px */

    .about-highlights {

        grid-template-columns: repeat(2, 1fr);

        gap: 1.5rem;

    }

}



@media (max-width: 768px) {

    /* Container & Padding Tablet Adjustments */

    .container-fluid.px-5 {

        padding-left: 2rem !important;

        padding-right: 2rem !important;

    }



    /* Page Header Tablet */

    .page-header {

        padding: 4.5rem 0;

    }



    .page-title {

        font-size: 2.5rem;

        margin-bottom: 0.75rem;

    }



    .page-subtitle {

        font-size: 1.05rem;

    }



    /* Tech Logo Cloud Tablet */

    .tech-logo-cloud {

        gap: 1.5rem;

    }



    .tech-logo {

        min-width: 120px;

        min-height: 120px;

        padding: 1.5rem;

    }



    .tech-logo i,

    .tech-logo-svg {

        font-size: 3rem;

    }



    /* Section Padding Tablet */

    .about-hero-section,
    .contact-section {

        padding: 3rem 0;

    }







    .expertise-showcase-section {

        padding: 5rem 0;

    }



    .hero-stats {

        gap: 1.5rem;

    }



    .stat {

        padding-left: 1.25rem;

    }



    .stat-number {

        font-size: 1.75rem;

    }



    .stat-label {

        font-size: 0.85rem;

    }



    .about-highlights {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }



    /* Hero Section Tablet */

    .hero-stats-bar {

        grid-template-columns: repeat(2, 1fr);

        gap: 1rem;

        margin-bottom: 2rem;

    }



    .stat-pill {

        padding: 1.25rem;

        gap: 1rem;

    }



    .pill-icon {

        width: 45px;

        height: 45px;

        font-size: 1.5rem;

    }



    .pill-number {

        font-size: 1.25rem;

    }



    .pill-text {

        font-size: 0.8rem;

    }



    .hero-main-title {

        font-size: 2.2rem;

        margin-bottom: 1.25rem;

    }



    .hero-cta-buttons {

        flex-direction: column;

    }



    .hero-cta-buttons .btn {

        width: 100%;

    }



    .hero-image-wrapper {

        height: 350px;

    }



    .hero-image-frame {

        height: 350px;

    }



    .achievement-card.card-1 {

        bottom: 20px;

        left: 15px;

    }



    .achievement-card.card-2 {

        top: 20px;

        right: 15px;

    }



    /* Sidebar responsiveness */

    .article-sidebar {

        position: static;

        top: auto;

        margin-top: 3rem;

    }



    .row.gap-5 {

        flex-direction: column;

        gap: 1.5rem !important;

    }



    .col-lg-8,

    .col-lg-3 {

        flex: 0 0 100%;

        max-width: 100%;

    }



    .about-stats {

        grid-template-columns: repeat(2, 1fr);

        gap: 1.5rem;

    }



    /* Modern timeline mobile adjustments */

    .modern-timeline {

        grid-template-columns: 1fr;

    }



    .milestone-card {

        padding: 2rem;

    }



    .milestone-year {

        font-size: 1.8rem;

    }



    .milestone-icon {

        width: 50px;

        height: 50px;

        font-size: 1.5rem;

    }



    /* About page mobile adjustments */

    .quick-stat {

        flex-direction: column;

        text-align: center;

        gap: 1rem;

    }



    .why-card,

    .service-card,

    .value-card,

    .trust-badge {

        padding: 1.75rem 1.5rem;

    }



    .why-icon {

        width: 60px;

        height: 60px;

        font-size: 2rem;

    }



    .service-header {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }



    .cta-buttons {

        flex-direction: column;

    }



    .btn-outline-gold,

    .btn-gold {

        width: 100%;

    }



    .client-logo {

        min-width: 150px;

    }



    .client-logo img {

        height: 40px;

    }



    .blog-image {

/*        height: 200px;*/

    }



    .blog-content h3 {

        font-size: 1.1rem;

    }



    .hero-cta {

        flex-direction: column;

        gap: 1rem;

    }



    .hero-cta .btn {

        width: 100%;

    }



    .cta-link {

        width: 100%;

    }



    h1 {

        font-size: 2.5rem;

    }



    .hero-title {

        font-size: 2.5rem;

    }



    .section-title {

        font-size: 2rem;

    }



    .tech-stack {

        grid-template-columns: 1fr;

    }



    .footer-right {

        flex-direction: column;

        gap: 1.5rem;

        align-items: center;

    }



    .footer-main {

        flex-direction: column;

        align-items: center;

        gap: 1.5rem;

        text-align: center;

    }



    .footer-left h4,

    .footer-left p {

        text-align: center;

    }



    .footer-links {

        flex-direction: column;

        gap: 0.75rem;

        align-items: center;

    }



    .footer-socials {

        justify-content: center;

    }



    /* Footer bottom mobile - break phone numbers into separate lines */

    .footer-bottom p {

        margin: 0.75rem 0;

    }



    .footer-bottom a {

        display: block;

        margin: 0rem 0;

    }



    .hero-frame-wrapper {

        max-width: 280px;

    }



    /* About frame wrapper responsive */

    .about-frame-wrapper {

        max-width: 100%;

        margin-bottom: 2rem;

    }



    /* About premium section - stack columns on tablet */

    .about-premium .col-lg-5,

    .about-premium .col-lg-7 {

        flex: 0 0 100%;

        max-width: 100%;

    }



    .expertise-section,

    .portfolio-section,

    .stories-section,

    .about-premium,

    .testimonials-luxury,
    .blogs-section,
    .cta-luxury,
    .why-work-section,
    .services-offered-section,
    .blogs-section{

        padding: 3rem 0;

    }
/*  26-03-2026  */

.page-template-page-about .services-offered-section{
    padding-top: 0px !important;
}



    /* Article Header Tablet - Slightly Reduced */

    .article-header {

        padding: 3rem 0;

    }



    .article-header h1 {

        font-size: 2.5rem;

    }



    .article-featured-image {

        max-height: 400px;

    }

}



@media (max-width: 576px) {

/*  27-03-2026  */


.single-case-study .overview-grid{
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 1rem !important;
}
.single-case-study .overview-item .label{
    margin-bottom: 0px !important;
}
.single-post .article-content iframe{
    width: auto !important;
}

#gform_1 #choice_1_10_1{
    max-height: 23px !important;
}






    /* Container & Padding Mobile Adjustments 

    .container-fluid.px-5 {

        padding-left: 0.625rem !important;

        padding-right: 0.625rem !important;

    }



    /* Mobile Navbar Fixes */

    .navbar-luxury {

        padding: 0.4rem 0;

    }



    .navbar-brand {

        margin-right: auto;

    }



    .navbar-toggler {

/*        border: none;*/

        padding: 0.25rem 0.5rem;

    }



    .navbar-toggler-icon {

        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232D501A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

        width: 1.5rem;

        height: 1.5rem;

    }



    .navbar-collapse {

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        background: var(--color-white);

        border-bottom: 1px solid rgba(212, 175, 55, 0.15);

        padding: 1rem 0.625rem;

/*        margin-top: 0.5rem;*/

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        z-index: 1001;

/*    26-03-2026    */
    
        display: none;
        visibility: hidden;

    }

    .navbar-collapse.show {
        display: block !important;
        visibility: visible !important;
    }



    .navbar-nav {

        flex-direction: column !important;

/*        gap: 0.75rem;*/

    }



    .nav-link {

        margin: 0.5rem 0 !important;

        padding: 0.5rem 0;

        display: block;

    }



    .navbar-collapse .btn {

        width: 100%;

        margin-left: 0 !important;

        margin-top: 0.75rem;

    }



    /* Article Header Mobile - More Concise */

    .article-header {

        padding: 2rem 0;

    }



    .article-header h1 {

        font-size: 1.75rem;

        margin-bottom: 1rem;

        line-height: 1.2;

    }



    .blog-category-badge {

        padding: 0.4rem 0.9rem;

        font-size: 0.7rem;

/*        margin-bottom: 0.75rem;*/

    }



    .article-meta {

        gap: 1rem;

        margin-top: 0.75rem;

        flex-direction: column;

        gap: 0.5rem;

    }



    .article-meta span {

        font-size: 0.8rem;

    }



    .article-featured-image {

        max-height: 300px;

    }



    /* Page Header Mobile */

    .page-header {

        padding: 3.5rem 0;

    }



    .page-title {

        font-size: 2rem;

        margin-bottom: 0.75rem;

        line-height: 1.2;

    }



    .page-subtitle {

        font-size: 0.95rem;

    }



    /* About Hero Section Mobile */

    .about-hero-section .row {

        flex-direction: column !important;

        gap: 2rem !important;

    }



    .about-hero-section .col-lg-6 {

        flex: 0 0 100% !important;

        max-width: 100% !important;

    }



    .hero-content-wrapper {

        padding: 0;

    }



    /* Section Spacing Mobile */

    .expertise-showcase-section {

        padding: 4rem 0;

    }



    .why-work-section,

    .services-offered-section,

    .core-values-section,

    .journey-section,

    .trust-section {

        padding: 3rem 0;

    }



    /* Tech Logo Cloud Mobile */

    .tech-logo-cloud {

        gap: 1rem;

        max-width: 100%;

    }



    .tech-logo {

        min-width: 100px;

        min-height: 100px;

        padding: 1.25rem 0.75rem;

        gap: 0.5rem;

    }



    .tech-logo i,

    .tech-logo-svg {

        font-size: 2.5rem;

        width: 2.5rem;

        height: 2.5rem;

    }



    .tech-logo span {

        font-size: 0.75rem;

        font-weight: 600;

    }



    /* Section Titles Mobile */

    .section-subtitle {

        font-size: 0.95rem;

    }



    .expertise-subtitle {

        font-size: 0.9rem;

    }



    .nav-link {

        margin: 0 0.75rem;

    }



    .hero-label {

        font-size: 0.8rem;

    }



    .hero-title {

        font-size: 2rem;

    }



    .hero-subtitle {

        font-size: 1rem;

    }



    .section-title {

        font-size: 1.5rem;

    }



    .portfolio-card {

        aspect-ratio: auto;

        min-height: 250px;

    }



    .btn {

        padding: 0.7rem 1.5rem;

        font-size: 0.8rem;

    }



    .btn-lg {

        padding: 0.8rem 2rem;

    }



    /* Mobile adjustments for new components */



    /* Hero Section Mobile */

    .hero-stats-bar {

        grid-template-columns: 1fr;

        gap: 1rem;

        margin-bottom: 1.5rem;

    }



    .stat-pill {

        padding: 1rem;

        gap: 0.75rem;

    }



    .pill-icon {

        width: 40px;

        height: 40px;

        font-size: 1.3rem;

    }



    .pill-number {

        font-size: 1.1rem;

    }



    .pill-text {

        font-size: 0.75rem;

    }



    .hero-main-title {

        font-size: 1.8rem;

        line-height: 1.3;

        margin-bottom: 1rem;

    }



    .hero-subtitle {

        font-size: 0.95rem;

        margin-bottom: 1.5rem;

    }



    /* Hero stats mobile responsive - side by side layout */

    .hero-stats {

        gap: 0.75rem;

        margin-bottom: 2rem;

        flex-wrap: nowrap;

        justify-content: space-between;

    }



    .stat {

        flex: 1 1 auto;

        min-width: 0;

        padding-left: 0.75rem;

    }



    .stat-number {

        font-size: 1.25rem;

    }



    .stat-label {

        font-size: 0.65rem;

    }



    .hero-value-props {

        gap: 0.75rem;

        margin-bottom: 1.5rem;

    }



    .value-prop {

        font-size: 0.9rem;

        gap: 0.75rem;

    }



    .hero-cta-buttons {

        flex-direction: column;

        gap: 1rem;

    }



    .hero-cta-buttons .btn {

        width: 100%;

        padding: 0.8rem 1.5rem;

        font-size: 0.85rem;

    }



    .hero-image-wrapper {

        height: 300px;

    }



    .hero-image-frame {

        height: 300px;

    }



    .achievement-card {

        display: none;

    }



    .hero-accent-shape {

        width: 120px;

        height: 120px;

        top: -15px;

        right: -15px;

    }



    .about-stats {

        grid-template-columns: 1fr;

        gap: 1rem;

    }



    .stat-box {

        padding: 1.5rem 1rem;

    }



    .stat-box h4 {

        font-size: 2rem;

    }



    .toc-widget,

    .share-widget,

    .author-widget,

    .newsletter-widget {

        padding: 1.25rem;

        margin-bottom: 1.5rem;

    }



    .toc-title,

    .widget-title {

        font-size: 1rem;

    }



    .share-buttons {

        gap: 0.75rem;

    }



    .share-btn {

        width: 40px;

        height: 40px;

        font-size: 1rem;

    }



    .author-image {

        max-width: 120px;

        height: 120px;

    }



    .pagination {

        gap: 0.25rem;

    }



    .page-link {

        padding: 0.6rem 0.8rem;

        min-width: 40px;

        font-size: 0.9rem;

    }



    /* About page small screen adjustments */

    .about-label {

        font-size: 0.75rem;

    }



    .about-text-lead {

        font-size: 1rem;

    }



    .stat-number {

        font-size: 1.5rem;

        min-width: 60px;

    }



    .stat-label {

        font-size: 0.85rem;

    }



    .why-card,

    .service-card,

    .value-card,

    .trust-badge {

        padding: 1.5rem 1rem;

    }



    .why-icon {

        width: 55px;

        height: 55px;

        font-size: 1.8rem;

    }



    .why-card h4,

    .service-header h4 {

        font-size: 1.1rem;

    }



    .value-number {

        font-size: 3rem;

        margin-bottom: -1rem;

    }



    .trust-stat h3 {

        font-size: 2.2rem;

    }



    .cta-buttons {

        flex-direction: column;

        gap: 1rem;

    }



    .btn-outline-gold,

    .btn-gold {

        width: 100%;

    }



    .about-frame-wrapper {

        min-height: 350px;

    }

}



/* ================================================================

   ANIMATIONS

   ================================================================ */



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.fade-in-up {

    animation: fadeInUp 0.8s ease-out;

}



/* ================================================================

   ACCESSIBILITY

   ================================================================ */



@media (prefers-reduced-motion: reduce) {

    * {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}



/* ================================================================

   WORDPRESS DEFAULT STYLING

   ================================================================ */



/* WordPress Content Container */

.wp-content,

.entry-content,

.post-content {

    max-width: 100%;

}



/* WordPress Images */

img.wp-image-*,

img.alignleft,

img.alignright,

img.aligncenter,

img.size-full,

img.size-large,

img.size-medium {

    height: auto;

    max-width: 100%;

    border-radius: 8px;

    transition: var(--transition);

}



/* Image Alignments */

.aligncenter {

    display: block;

    margin: 1.5rem auto;

}



.alignleft {

    float: left;

    margin: 0 2rem 1rem 0;

}



.alignright {

    float: right;

    margin: 0 0 1rem 2rem;

}



.alignnone {

    margin: 1.5rem 0;

}



/* Image Captions */

.wp-caption,

figure.wp-caption {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.15) 0%, rgba(13, 13, 13, 0.1) 100%);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 8px;

    padding: 1rem;

    margin: 1.5rem 0;

    text-align: center;

    max-width: 100%;

}



.wp-caption img,

figure.wp-caption img {

    display: block;

    margin: 0 auto 0.75rem;

    max-width: 100%;

    height: auto;

}



.wp-caption-text,

.wp-caption-dd,

figcaption {

    color: var(--color-text-light);

    font-size: 0.9rem;

    font-style: italic;

    margin: 0;

    padding: 0 0.5rem;

    line-height: 1.5;

}



/* WordPress Code Blocks */

code,

.wp-code,

code.language-php,

code.language-javascript,

code.language-html,

code.language-css {

    background: rgba(45, 80, 22, 0.2);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 4px;

    color: var(--color-gold);

    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;

    font-size: 0.9rem;

    padding: 0.25rem 0.5rem;

    display: inline-block;

}



pre,

pre code,

.wp-block-code,

.wp-block-syntaxhighlighter-code {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.3) 0%, rgba(13, 13, 13, 0.4) 100%);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 8px;

    color: var(--color-text);

    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;

    font-size: 0.85rem;

    line-height: 1.6;

    margin: 1.5rem 0;

    overflow-x: auto;

    padding: 1.5rem;

    position: relative;

}



pre code {

    background: none;

    border: none;

    color: inherit;

    padding: 0;

}



/* WordPress Block Quotes */

blockquote,

.wp-block-quote {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);

    border-left: 4px solid var(--color-gold);

    color: var(--color-text-light);

    font-size: 1.1rem;

    font-style: italic;

    margin: 2rem 0;

    padding: 1.5rem;

    padding-left: 2rem;

    border-radius: 4px;

}



blockquote p {

    margin: 0;

    color: inherit;

}



blockquote cite,

.wp-block-quote__citation,

.wp-block-quote cite {

    color: var(--color-gold);

    display: block;

    font-size: 0.9rem;

    font-style: normal;

    font-weight: 600;

    margin-top: 1rem;

}



/* WordPress List Styles */

ul.wp-block-list,

ol.wp-block-list {

    padding-left: 2rem;

}



ul.wp-block-list li,

ol.wp-block-list li {

    margin-bottom: 0.5rem;

    color: var(--color-text);

    line-height: 1.8;

}



ul.wp-block-list li::marker {

    color: var(--color-gold);

}



/* WordPress Table Styles */

table,

.wp-block-table table {

    width: 100%;

    border-collapse: collapse;

    margin: 1.5rem 0;

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.1) 0%, rgba(13, 13, 13, 0.08) 100%);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 8px;

    overflow: hidden;

}



table thead,

.wp-block-table table thead {

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.25) 0%, rgba(13, 13, 13, 0.2) 100%);

}



table th,

.wp-block-table table th {

    background: inherit;

    border: 1px solid rgba(212, 175, 55, 0.2);

    color: var(--color-gold);

    font-weight: 700;

    padding: 1rem;

    text-align: left;

}



table td,

.wp-block-table table td {

    border: 1px solid rgba(212, 175, 55, 0.15);

    color: var(--color-text);

    padding: 0.75rem 1rem;

}



table tbody tr:hover,

.wp-block-table table tbody tr:hover {

    background: rgba(212, 175, 55, 0.05);

}



/* WordPress Separator Styles */

hr,

.wp-block-separator {

    border: none;

    border-top: 2px solid rgba(212, 175, 55, 0.2);

    margin: 2rem 0;

}



.wp-block-separator.is-style-wide {

    border-top: 3px solid rgba(212, 175, 55, 0.3);

}



.wp-block-separator.is-style-dots {

    border: none;

    color: var(--color-gold);

    font-size: 2rem;

    height: auto;

    text-align: center;

}



/* WordPress Button Styles */

.wp-block-button .wp-block-button__link,

.wp-block-buttons .wp-block-button .wp-block-button__link {

    background: var(--color-gold);

    border: 2px solid var(--color-gold);

    border-radius: 8px;

    color: var(--color-dark);

    display: inline-block;

    font-weight: 600;

    padding: 0.75rem 1.5rem;

    text-decoration: none;

    transition: var(--transition);

}



.wp-block-button .wp-block-button__link:hover,

.wp-block-buttons .wp-block-button .wp-block-button__link:hover {

    background: transparent;

    color: var(--color-gold);

    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);

}



/* WordPress Column/Gallery Blocks */

.wp-block-columns {

    gap: 1.5rem;

}



.wp-block-gallery {

    gap: 1rem;

}



.wp-block-gallery img {

    border-radius: 8px;

    border: 1px solid rgba(212, 175, 55, 0.15);

}



/* WordPress Heading Consistency */

h1, h2, h3, h4, h5, h6 {

    line-height: 1.3;

    margin-top: 1.5rem;

    margin-bottom: 0.75rem;

}



h1:first-child,

h2:first-child,

h3:first-child,

h4:first-child,

h5:first-child,

h6:first-child {

    margin-top: 0;

}



/* WordPress Paragraph Spacing */

p,

.wp-block-paragraph {

    line-height: 1.8;

    margin-bottom: 1rem;

}



p:last-child,

.wp-block-paragraph:last-child {

    margin-bottom: 0;

}



/* WordPress Embeds */

.wp-embed,

.wp-block-embed iframe {

    border-radius: 8px;

    border: 1px solid rgba(212, 175, 55, 0.15);

    max-width: 100%;

}



/* WordPress Responsive Media */

@media (max-width: 768px) {

    .alignleft,

    .alignright {

        float: none;

        margin: 1rem 0;

    }



    table,

    .wp-block-table {

        overflow-x: auto;

        display: block;

    }

}



/* ================================================================

   PORTFOLIO CARDS - VISIBLE TITLES BY DEFAULT

   ================================================================ */



.portfolio-overlay {

    opacity: 1 !important;

    background: linear-gradient(135deg, rgba(45, 80, 22, 0.85) 0%, rgba(212, 175, 55, 0.25) 100%) !important;

}



.portfolio-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    width: 100%;

}



.portfolio-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    color: var(--color-gold);

    text-decoration: none;

    font-size: 0.95rem;

    font-weight: 600;

    padding: 0.5rem 1rem;

    border: 1px solid var(--color-gold);

    border-radius: 4px;

    transition: var(--transition);

    margin-top: 0.5rem;

}



.portfolio-link:hover {

    background: var(--color-gold);

    color: var(--color-dark);

}



/* ================================================================

   CASE STUDIES LISTING PAGE

   ================================================================ */



.page-header {

    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-green-dark) 100%);

    padding: 4rem 0;

    position: relative;

    overflow: hidden;

}



.page-header::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);

}



.page-header-content {

    text-align: center;

}



.page-header-content h1 {

    font-family: var(--font-serif);

    font-size: 3rem;

    font-weight: 800;

    color: var(--color-white);

    margin-bottom: 1rem;

}



.page-subtitle {

    font-size: 1.2rem;

    color: var(--color-text-light);

    margin-bottom: 3rem;

/*    max-width: 700px;*/

    margin-left: auto;

    margin-right: auto;

}



.header-stats {

    display: flex;

    justify-content: center;

    gap: 3rem;

    flex-wrap: wrap;

}



.header-stats .stat {

    text-align: center;

}



.header-stats .stat-value {

    display: block;

    font-size: 2rem;

    font-weight: 800;

    color: var(--color-gold);

    margin-bottom: 0.25rem;

}



.header-stats .stat-label {

    display: block;

    font-size: 0.9rem;

    color: var(--color-text-light);

}



/* Projects Filter */

.projects-filter-section {

    background: var(--color-bg);

    padding: 5rem 0 3rem 0;

    position: relative;

    z-index: 10;

}



.filter-container {

    display: flex;

    justify-content: center;

    gap: 1.5rem;

    flex-wrap: wrap;

}



.filter-btn {

    padding: 0.75rem 1.5rem;

    border: 2px solid var(--color-gold);

    background: transparent;

    color: var(--color-gold);

    border-radius: 8px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

    font-size: 0.95rem;

}



.filter-btn:hover,

.filter-btn.active {

    background: var(--color-gold);

    color: var(--color-dark);

}



/* Case Studies Grid */

.case-studies-grid {

    background: var(--color-bg);

    padding: 0rem 0;

}



.project-item {

    animation: fadeIn 0.6s ease;
    padding-top: 10px !important;

}




@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.case-study-card {

    background: rgba(42, 65, 20, 0.3);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 8px;

    overflow: hidden;

    transition: var(--transition);

    height: 100%;

    display: flex;

    flex-direction: column;

}



.case-study-card:hover {

    border-color: var(--color-gold);

    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.15);

    transform: translateY(-8px);

}



.case-study-image {

    position: relative;

    width: 100%;

    height: 280px;

    overflow: hidden;

}



.case-study-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.case-study-card:hover .case-study-image img {

    transform: scale(1.08);

}



.case-study-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: var(--transition);

}



.case-study-card:hover .case-study-overlay {

    opacity: 1;

}



.view-button {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

    background: var(--color-gold);

    color: var(--color-dark);

    text-decoration: none;

    border-radius: 6px;

    font-weight: 600;

    transition: var(--transition);

}



.view-button:hover {

    transform: translateX(5px);

    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);

}



.case-study-content {

    padding: 1.5rem;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.case-category {

    display: inline-block;

    padding: 0.4rem 0.8rem;

    background: rgba(212, 175, 55, 0.1);

    color: var(--color-gold);

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 4px;

    margin-bottom: 1rem;

    width: fit-content;

}



.case-study-content h3 {

    font-family: var(--font-serif);

    font-size: 1.3rem;

    color: var(--color-white);

    margin-bottom: 0.75rem;

    margin-top: 0;

}



.case-study-content p {

    color: var(--color-text-light);

    font-size: 0.95rem;

    line-height: 1.6;

    flex-grow: 1;

}



.case-meta {

    display: flex;

    gap: 1.5rem;

    margin: 1rem 0;

    padding: 1rem 0;

    border-top: 1px solid rgba(212, 175, 55, 0.2);

    border-bottom: 1px solid rgba(212, 175, 55, 0.2);

}



.meta-item {

    display: flex;

    align-items: center;

    font-size: 0.85rem;

    color: var(--color-gold);

    font-weight: 600;

}



.meta-item i {

    color: var(--color-gold);

}



.case-tags {

    display: flex;

    gap: 0.5rem;

    flex-wrap: wrap;

    margin-top: 1rem;

}



.tag {

    display: inline-block;

    padding: 0.35rem 0.7rem;

    background: rgba(212, 175, 55, 0.05);

    color: var(--color-text-light);

    font-size: 0.75rem;

    border: 1px solid rgba(212, 175, 55, 0.15);

    border-radius: 4px;

    transition: var(--transition);

}



.tag:hover {

    background: rgba(212, 175, 55, 0.15);

    color: var(--color-gold);

    border-color: var(--color-gold);

}



.view-more-section {

    text-align: center;

    margin-top: 3rem;

}



.btn-outline-gold {

    border: 2px solid var(--color-gold);

    color: var(--color-gold);

    background: transparent;

    padding: 0.75rem 2rem;

    font-weight: 600;

    transition: var(--transition);

}



.btn-outline-gold:hover {

    background: var(--color-gold);

    color: var(--color-dark);

}



/* Case Studies Stats */

.case-studies-stats {

    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-green-dark) 100%);

    padding: 1rem 0 5rem 0;

}



.stat-card {

    padding: 2rem;

    background: rgba(42, 65, 20, 0.3);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 8px;

    transition: var(--transition);

}



.stat-card:hover {

    border-color: var(--color-gold);

    transform: translateY(-5px);

    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.1);

}



.stat-card h3 {

    font-family: var(--font-serif);

    font-size: 2.5rem;

    color: var(--color-gold);

    margin-bottom: 0.5rem;

    margin-top: 0;

}



.stat-card p {

    font-size: 1rem;

    color: var(--color-text-light);

}



/* ================================================================

   CASE STUDY SINGLE PAGE

   ================================================================ */



.case-study-header {

    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-green-dark) 100%);

}



.case-overview {

    background: rgba(212, 175, 55, 0.05);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 8px;

    padding: 2rem;

    margin-bottom: 2rem;

}



.case-overview h3 {

    font-size: 1.3rem;

    margin-bottom: 1.5rem;

    margin-top: 0;

}



.overview-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 1.5rem;

}



.overview-item {

    display: flex;

    flex-direction: column;

}



.overview-item .label {

    font-size: 0.85rem;

    color: var(--color-gold);

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 0.5rem;

    letter-spacing: 0.5px;

}



.overview-item .value {

    font-size: 1.1rem;

    color: var(--color-white);

    font-weight: 600;

}



.case-study-article {

    line-height: 1.8;

}



.case-study-article h2 {

    font-family: var(--font-serif);

    font-size: 1.8rem;

    color: var(--color-white);

    margin-top: 2.5rem;

    margin-bottom: 1.5rem;

}



.case-study-article h3 {

    font-family: var(--font-serif);

    font-size: 1.3rem;

    color: var(--color-gold);

    margin-top: 1.5rem;

    margin-bottom: 1rem;

}



.case-study-article ul {

    margin-left: 1.5rem;

    margin-bottom: 1.5rem;

}



.case-study-article li {

    margin-bottom: 0.75rem;

    color: var(--color-text-light);

}



.results-metrics {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2rem;

    margin: 2.5rem 0;

    padding: 2rem;

    background: rgba(212, 175, 55, 0.05);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 8px;

}



.metric {

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.75rem;

}



.metric-icon {

    font-size: 2.5rem;

    color: var(--color-gold);

}



.metric-value {

    font-family: var(--font-serif);

    font-size: 2rem;

    font-weight: 800;

    color: var(--color-gold);

}



.metric-label {

    font-size: 0.95rem;

    color: var(--color-text-light);

}



.case-details-widget {

    background: rgba(42, 65, 20, 0.3);

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 8px;

    padding: 1.5rem;

}



.details-list {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.detail-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    padding-bottom: 0.75rem;

    border-bottom: 1px solid rgba(212, 175, 55, 0.15);

}



.detail-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

}



.detail-label {

    font-size: 0.85rem;

    color: var(--color-gold);

    font-weight: 700;

    text-transform: uppercase;

}



.detail-value {

    font-size: 0.95rem;

    color: var(--color-white);

    font-weight: 600;

}



/* Responsive */

@media (max-width: 768px) {

    .page-header-content h1 {

        font-size: 2rem;

    }



    .header-stats {

        gap: 2rem;

    }



    .filter-container {

        gap: 1rem;

    }



    .filter-btn {

        padding: 0.6rem 1.2rem;

        font-size: 0.85rem;

    }



    .results-metrics {

        grid-template-columns: repeat(2, 1fr);

        gap: 1.5rem;

    }



    .overview-grid {

        grid-template-columns: repeat(2, 1fr);

    }

/*  26-03-2026  */

    .article-content{
        padding: 3rem 0 !important;
    }

    .single-post .b-sidebar {
        margin-top: 20px !important;
    }
    .single-post .b-sidebar .article-sidebar{
        margin-top: 0px !important;
    }


/*  27-03-2026  */

.single-case-study .article-sidebar{
    margin-top: 0px !important;
}

.single-post .article-sidebar #ez-toc-container{
    margin-bottom: 1rem !important;
}
.single-post .share-widget,
.single-post .author-widget{
    margin-bottom: 1rem !important;
}

/*30-03-2026*/

.post-type-archive-case-study .case-study-overlay{
    display: none !important;
}

.post-type-archive-case-study .case-btn{
    display: block !important;
}


}













/*24-03-2026*/



.home .expertise-card{

    height: stretch;

}

.portfolio-content a{

    text-decoration: none !important;

}

.blog-category a{

    text-decoration: none !important;

    color: #000000 !important;

}

/*.blog-content .blog-link{

    margin-top: 10px !important;

}*/





/* btn-gold - Sliding Wipe Hover Effect */

.btn-gold {

    position: relative;

    overflow: hidden;

    z-index: 1;

    transition: var(--transition);

}



.btn-gold::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: var(--color-green);

    transition: var(--transition);

    z-index: -1;

}



.btn-gold:hover::before {

    left: 0;

}



.btn-gold:hover {

    color: #fff !important;

    border-color: var(--color-green) !important;

}



.story-content a{

    text-decoration: none !important;

}

.story-content p{

    margin-bottom: revert !important;

}

.home .story-card{

    height: stretch !important;

}

.footer-socials a{

    text-decoration: none !important;

}





/* ── BLOG PAGINATION ── */

nav.blog-pagination {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10 !important;        /* override .gap-2 */

  margin-top: 3rem !important; /* override .mt-5 */

}



/* Base style for ALL page number links & spans */

nav.blog-pagination .page-numbers {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 52px;

  height: 52px;

  padding: 0 1.2rem;

  border: 1px solid rgba(255, 255, 255, 0.18);

/*  border-right: none;*/

  background: transparent;

  color: #f5f0e8;

  font-size: 0.92rem;

  font-weight: 600;

  letter-spacing: 0.04em;

  text-decoration: none;

  transition: background 0.2s, color 0.2s, border-color 0.2s;

  cursor: pointer;

  border-radius: 3px;

}



/* Close the right border on the last item */

nav.blog-pagination .page-numbers:last-child {

  border-right: 1px solid rgba(255, 255, 255, 0.18);

}



/* Hover state */

nav.blog-pagination a.page-numbers:hover {

    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.15) 100%);

    border-color: var(--color-gold);

    color: var(--color-gold);

    font-weight: 600;

}



/* Current / active page — solid fill */

nav.blog-pagination .page-numbers.current {

    font-weight: 600;

    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.15) 100%);

    border-color: var(--color-gold);

    color: var(--color-gold);

}



/* NEXT » link — wider, uppercase */

nav.blog-pagination a.next.page-numbers {

  min-width: auto;

  padding: 0 1.8rem;

  font-weight: 600;

  font-size: 0.78rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  border-right: 1px solid rgba(255, 255, 255, 0.18);

}



nav.blog-pagination a.next.page-numbers:hover {

    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.15) 100%);

    border-color: var(--color-gold);

    color: var(--color-gold);

    font-weight: 600;

}



/* PREV « link (mirror of next) */

nav.blog-pagination a.prev.page-numbers {

  min-width: auto;

  padding: 0 1.8rem;

  font-size: 0.78rem;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



/*25-03-2026*/

#gform_2 #input_2_1{
    height: 42px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    color: var(--color-text) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    transition: var(--transition) !important;
    outline: none !important;
}
#gform_2 label{
    display: none !important;
}
#gform_2 #input_2_1:focus{
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-text) !important;
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.15) !important;

}


#gform_2 #gform_submit_button_2{
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
    border: none !important;
    position: relative;
    overflow: hidden !important;
    z-index: 1;
    transition: var(--transition) !important;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.8px;
    padding: 0.8rem 2.5rem !important;
    text-transform: uppercase;
    font-size: 0.85rem !important;
    border-radius: 0px;
    width: 100%;
    height: 46px !important;
}

#gform_2 #gform_submit_button_2::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-green);
    transition: var(--transition);
    z-index: -1;
}
#gform_2 #gform_submit_button_2:hover {
    color: #fff !important;
    background: transparent !important;
    border-color: var(--color-green) !important;
}

#gform_2 #gform_submit_button_2:hover::before {
    left: 0;
}
/* Subscribe Button - Final Fix */
#gform_2 #gform_submit_button_2 {
    position: relative !important;
    overflow: hidden !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Subscribe Button Hover Fix */
#gform_2 #gform_submit_button_2 {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
    border: none !important;
    transition: var(--transition) !important;
}

#gform_2 #gform_submit_button_2::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--color-green) !important;
    transition: var(--transition) !important;
    z-index: -1 !important;
}

#gform_2 #gform_submit_button_2:hover {
    color: #fff !important;
    background: transparent !important;
    border-color: var(--color-green) !important;
}

#gform_2 #gform_submit_button_2:hover::before {
    left: 0 !important;
}


/* Subscribe Button - Input Fix */
#gform_2 .gform-footer {
    position: relative !important;
    overflow: hidden !important;
}

#gform_2 #gform_submit_button_2 {
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
    border: none !important;
    transition: var(--transition) !important;
    position: relative !important;
    z-index: 1 !important;
    cursor: pointer !important;
}

#gform_2 #gform_submit_button_2:hover {
    background: var(--color-green) !important;
    color: #fff !important;
    border-color: var(--color-green) !important;
    transition: background 0.4s ease !important;
}




/* Subscribe Button Wipe Effect */
#gform_2 .gform-footer {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

#gform_2 .gform-footer::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--color-green) !important;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 0 !important;
}

#gform_2 .gform-footer:hover::before {
    left: 0 !important;
}

#gform_2 #gform_submit_button_2 {
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
    border: none !important;
    position: relative !important;
    z-index: 1 !important;
    transition: color 0.4s ease !important;
    cursor: pointer !important;
    width: 100% !important;
}

#gform_2 .gform-footer:hover #gform_submit_button_2 {
    background: transparent !important;
    color: #fff !important;
}

body {
  overflow: revert !important;
}

.single-case-study .article-content {
  overflow: revert !important;
}

.single-case-study .c-sidebar {
  position: sticky;
  align-self: flex-start !important;
  top: 10px;
}

.single-case-study .article-sidebar {
  position: sticky !important;
  top: 20px !important;
}



.single-post .blog-article #ez-toc-container{
    display: none !important;
}
.single-post .blog-article h2{
    margin-top: 0px !important;
}
.single-post .article-sidebar #ez-toc-container{
    background: linear-gradient(135deg, rgba(45, 80, 22, 0.15) 0%, rgba(13, 13, 13, 0.2) 100%);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    width: 100% !important;
}
.single-post .article-sidebar #ez-toc-container a{
    color: var(--color-text-light) !important;
}

.single-post .article-content {
  overflow: revert !important;
}
.single-post .b-sidebar {
  position: sticky;
  align-self: flex-start !important;
  top: 10px;
}
.single-post .related-content .category a{
    text-decoration: none !important;
    color: rgb(212 175 55) !important;
}

.single-post .blog-article figure{
    background: linear-gradient(135deg, rgba(45, 80, 22, 0.15) 0%, rgba(13, 13, 13, 0.1) 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
    text-align: center;
    max-width: 100%;
}
.single-post .blog-article a{
    color: rgb(212 175 55) !important;
}
.single-post .blog-article a:hover{
    color: var(--color-gold-light) !important;
}

#gform_1 legend,
#gform_1 label{
    color: var(--color-text) !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.95rem !important;
}
#gform_1 label#label_1_10_1{
    color: var(--color-text-light) !important;
    margin-left: 0.5rem !important;
    font-size: var(--bs-body-font-size) !important;
    font-weight: var(--bs-body-font-weight) !important;
    margin-bottom: 0px !important;
}
#gform_1 input{
    height: 45px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    color: var(--color-text) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    transition: var(--transition) !important;
    outline: none !important;
    border-radius: 0.375rem !important;
}
#gform_1 input:focus,
#gform_1 textarea:focus,
#gform_1 textarea:focus,
#gform_1 select:focus{
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-text) !important;
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.15) !important;
}
#gform_1 textarea{
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    color: var(--color-text) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    transition: var(--transition) !important;
    outline: none !important;
    border-radius: 0.375rem !important;
}
#gform_1 select{
    height: 42px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    color: var(--color-text) !important;
/*    padding: 0.75rem 1rem !important;*/
    font-size: 0.95rem !important;
    transition: var(--transition) !important;
    outline: none !important;
    border-radius: 0.375rem !important;
}
#gform_1 #choice_1_10_1{
    height: unset !important; 
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    color: var(--color-text) !important;
    padding: unset !important;
    font-size: 0.95rem !important;
    transition: var(--transition) !important;
    outline: none !important;
    width: 23px !important;
}







#gform_1 #gform_submit_button_2{
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
    border: none !important;
    position: relative;
    overflow: hidden !important;
    z-index: 1;
    transition: var(--transition) !important;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.8px;
    padding: 0.8rem 2.5rem !important;
    text-transform: uppercase;
    font-size: 0.85rem !important;
    border-radius: 0px;
    width: 100%;
    height: 46px !important;
}

#gform_1 #gform_submit_button_1::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-green);
    transition: var(--transition);
    z-index: -1;
}
#gform_1 #gform_submit_button_1:hover {
    color: #fff !important;
    background: transparent !important;
    border-color: var(--color-green) !important;
}

#gform_1 #gform_submit_button_1:hover::before {
    left: 0;
}
/* Subscribe Button - Final Fix */
#gform_1 #gform_submit_button_1 {
    position: relative !important;
    overflow: hidden !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Subscribe Button Hover Fix */
#gform_1 #gform_submit_button_1 {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
    border: none !important;
    transition: var(--transition) !important;
    height: 54px !important;
    border-radius: 0px !important;
}

#gform_1 #gform_submit_button_1::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--color-green) !important;
    transition: var(--transition) !important;
    z-index: -1 !important;
}

#gform_1 #gform_submit_button_1:hover {
    color: #fff !important;
    background: transparent !important;
    border-color: var(--color-green) !important;
}

#gform_1 #gform_submit_button_2:hover::before {
    left: 0 !important;
}


/* Subscribe Button - Input Fix */
#gform_1 .gform-footer {
    position: relative !important;
    overflow: hidden !important;
}

#gform_1 #gform_submit_button_1 {
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
    border: none !important;
    transition: var(--transition) !important;
    position: relative !important;
    z-index: 1 !important;
    cursor: pointer !important;
}

#gform_1 #gform_submit_button_1:hover {
    background: var(--color-green) !important;
    color: #fff !important;
    border-color: var(--color-green) !important;
    transition: background 0.4s ease !important;
}




/* Subscribe Button Wipe Effect */
#gform_1 .gform-footer {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

#gform_1 .gform-footer::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--color-green) !important;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 0 !important;
}

#gform_1 .gform-footer:hover::before {
    left: 0 !important;
}

#gform_1 #gform_submit_button_1 {
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
    border: none !important;
    position: relative !important;
    z-index: 1 !important;
    transition: color 0.4s ease !important;
    cursor: pointer !important;
    width: 100% !important;
}

#gform_1 .gform-footer:hover #gform_submit_button_1 {
    background: transparent !important;
    color: #fff !important;
}

#gform_1 #gform_fields_1{
    row-gap: 25px !important;
}
/*26-03-2026*/


    .single-post .b-sidebar .article-sidebar{
        top: 20px !important;
    }


/*  27-03-2026  */

.single-post .article-featured-image img{
    max-height: inherit !important;
}

/*.blog-content h3{
    color: var(--color-gold) !important;
}*/



/* Hide Gravity Forms AJAX loading spinner */
.gform-loader,
#gform_ajax_spinner_1,
[id^="gform_ajax_spinner"],
[data-js-spinner-id="gform-ajax-spinner"] {
    display: none !important;
}


/*30-03-2026*/

.home .testimonial-card{
    height: stretch;
}
.post-type-archive-case-study .case-btn{
    margin-top: 2rem !important;
    display: none;
}

.single-post .ez-toc-title-container{
    color: var(--color-gold);
}

.single-post .blog-article h2,
.single-post .blog-article h3,
.single-post .blog-article h4,
.single-post .blog-article h5,
.single-post .blog-article h6{
    color: var(--color-gold) !important;
}

.page-template-page-story .blog-content .blog-meta,
.page-template-page-story .blog-content h3{
    color: var(--color-gold) !important;
}

.page-template-page-story .blogs-section{
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-green-dark) 20%);
}

/*10-04-2026*/

.blog-meta img{
    height: 20px !important;
}
.blog-meta{
    display: flex !important;
    justify-content: space-between !important;
}
.blog-meta .blog-date,
.blog-meta .blog-read-time{
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/*20-04-2026*/

.single-case_study .case-overview {
     background: none !important; 
     border: none !important; 
     border-radius: 0px !important; 
     padding: 0rem !important; 
     margin-bottom: 0rem !important; 
}

.single-case_study .case-overview .overview-item{
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}
.single-case_study .detail-value{
    text-align: end !important;
}
.single-case_study .result-item{
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    padding: 2rem;
/*    margin-bottom: 2rem;*/
}
.single-case_study .results-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.single-case_study .result-value{
    font-size: 1rem;
    color: var(--color-gold);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
    text-align: center !important;
}
.single-case_study .result-icon{
    text-align: center !important;
        margin-bottom: 20px;
}
.single-case_study .result-icon .emoji{
    font-size: 30px !important;
}
.single-case_study .result-label{
    text-align: center !important;
}
.single-case_study .case-study-article h2{
    margin-top: 1rem !important;
}
.single-case_study h6.wp-block-heading {
    color: var(--color-gold) !important;
}
.single-case_study .overview-item .value{
    text-align: center !important;
}
.single-case_study .overview-item .label{
    font-size: 1.85rem !important;
    text-align: center !important;
}
.single-case_study .wp-block-image figure{
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
}
.single-case_study .wp-block-image figure img{
    height: 200px;
    width: 100%;
}
.timeline {
    position: relative !important;
    padding: 2rem 0 !important;
}
.timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 15px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: #5e5e5c;
}
.timeline-item {
    margin-bottom: 1.8rem !important;
    padding-left: 60px !important;
    position: relative !important;
}
.timeline-dot {
    position: absolute !important;
    left: 4px !important;
    top: 6px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #1a1a1a;
    border: 3px solid #d4af37 !important;
    z-index: 1 !important;
}
.timeline-date {
    font-size: 1rem !important;
    color: var(--color-gold) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.3rem !important;
}
.timeline-title {
    font-size: 0.95rem;
    font-weight: 700;
}


/*21-04-2026*/

.single-case_study h6.cs-section-label{
    color: var(--color-gold) !important;
    margin-top: 30px !important;
    text-transform: uppercase !important;
}
.single-case_study .cs-sec h2.cs-section-title{
    margin-top: 1rem !important;
}

.single-case_study .tech-badges .tech-badge{
    display: inline-block;
    background: var(--color-gold);
    color: var(--color-dark);
    padding: 0.5rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}
.single-case_study .cs-testimonial{
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    padding: 2rem;
}
.single-case_study .cs-testimonial .testimonial-quote{
    font-style: italic;
}
.single-case_study .testimonial-author{
    display: flex;
    align-items: center;
    gap: 10px;
}
.single-case_study .testimonial-author .testimonial-avatar img{
    height: 40px !important;
    border-radius: 25px !important;
}
.single-case_study .testimonial-author .testimonial-name{
    color: var(--color-gold) !important;
    font-weight: 600 !important;
}
.single-case_study .mt-extra{
    font-weight: 400 !important;
}

.single-case_study .article-content {
  overflow: visible !important;
}






/*26-03-2026*/
/*Responsive*/

@media (max-width: 1400px){
    .home .hero-wrapper{
        gap: 1rem !important;
    }
}
@media (max-width: 1299px) {
    .nav-link{
        margin: 0 0.5rem !important;
    }
}

@media (max-width: 1200px){
    .navbar .btn{
        margin: 10px 0px 20px 0px !important;
    }
    .nav-link::after{
        bottom: 1px !important;
        left: 49% !important;
    }
    .nav-link.active::after {
        width: 100%;
    }

    .home .hero-cta{
        flex-direction: column;
        align-items: start !important;
        gap: 2rem !important;
    }

    .post-type-archive-case-study .case-studies-stats .col-md-3{
        width: 50% !important;
    }

/*  10-04-2026  */

.blog-meta{
    flex-direction: column !important;
    gap: 5px !important;
}

/*21-04-2026*/

.single-case_study .case-overview .overview-item{
    margin-bottom: 0px !important;
}

}

@media (max-width: 1025px){
    .home .hero-content{
        max-width: 100% !important;
    }
    .home .hero-image-section{
        margin-top: 80px !important;
    }
}

@media (max-width: 991px){
    .home .clients-section{
        padding: 3rem 0 !important;
    }
    .section-header{
        margin-bottom: 1px !important;
    }
    .about-hero-section .row{
        flex-direction: column !important;
    }
    .about-hero-section .col-lg-6{
        max-width: calc(100% - 0.5rem) !important;
    }
    /*body.post-type-archive-case-study{
        overflow: hidden !important;
    }*/
    .navbar-luxury{
        position: sticky !important;
    }
    .single-post .b-sidebar{
        margin-top: 30px;
    }

/*  27-03-2026  */

.single-case-study .c-sidebar{
    margin-top: 20px !important;
}
.single-case-study .toc-widget,
.single-case-study .author-widget{
    margin-bottom: 1rem !important;
}
.single-case-study .share-widget{
    margin-bottom: 10px !important;
}
.single-case-study .case-overview h3{
    margin-top: 0px !important;
}
.single-case-study .article-cta{
    margin-top: 2rem !important;
}

/*10-04-2026*/

    .blog-meta {
        flex-direction: row !important;
    }

/*  21-04-2026  */

.single-case_study .c-sidebar{
    margin-top: 30px !important;
}

}

@media (max-width: 767px){
    .home .hero-luxury{
        padding-top: 2rem !important;
    }
    .section-header{
        margin-bottom: 0px !important;
    }
    .home .portfolio-card.large .portfolio-image{
        height: 300px !important;
    }
    .page-header{
        padding: 2rem 0 !important;
    }

    .about-hero-section .col-lg-6{
        max-width: calc(100% - 0.5rem) !important;
    }
    .section-title{
        margin-bottom: 30px !important;
    }
    .post-type-archive-case-study .projects-filter-section{
        padding: 3rem 0 2rem 0 !important;
    }
    .post-type-archive-case-study .case-studies-stats{
        padding: 0rem 0 3rem 0 !important;
    }
/*  21-04-2026  */

    .single-case_study .c-sidebar .article-sidebar{
        margin-top: 0px !important;
    }
}

@media (max-width: 575px){
    .home .hero-stats{
        flex-direction: column !important;
    }
    .post-type-archive-case-study .case-studies-stats .col-md-3{
        width: 100% !important;
    }

/*  21-04-2026  */
    .overview-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .single-case_study .results-grid{
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)) !important;
    }
}

@media (max-width: 420px){
    .home .hero-image-section{
        width: 80% !important;
        margin: 50px auto 0px auto !important;
    }
    .home .blog-category{
        font-size: 0.65rem !important;
    }

/*  27-03-2026  */

.contact-form-wrapper{
    padding: 1rem !important;
}

/*30-03-2026*/

.post-type-archive-case-study .case-meta{
    flex-direction: column !important;
}
.post-type-archive-case-study .case-btn .view-button{
    font-size: 15px !important;
}
.cta-content h2{
    font-size: 30px !important;
}
.cta-content .btn{
    font-size: 0.6rem !important;
}

/*10-04-2026*/

    .blog-meta {
        flex-direction: column !important;
    }

}