/************* CSS Styles ************************
    Template Name: Adrian - Personal Portfolio Template
    Author: cosmos-themes
    Version: 2.0
    Copyright 2018
****************************************/


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

            Table of Content
            1. Body and Core Css
            2. Preloader
            3. Navbar
            4. Home Banner Section
            5. About Section
            6. Services Section
            7. Portfolio Section
            8. Blog Section
            9. Contact Section
            10. Footer
            11. Blog Banner Section
            12. Blog Post Page Main Area
            13. Site Mobile Responsive
            14. Particles Background

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


/*============ Local Font Declarations ============*/

/* Stevie Sans Font Family - Local Files */
@font-face {
    font-family: 'Stevie Sans';
    src: url('../fonts/Stevie Sans.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stevie Sans';
    src: url('../fonts/Stevie Sans Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stevie Sans';
    src: url('../fonts/Stevie Sans Book.woff2') format('woff2');
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stevie Sans';
    src: url('../fonts/Stevie Sans Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stevie Sans';
    src: url('../fonts/Stevie Sans Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stevie Sans';
    src: url('../fonts/Stevie Sans Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stevie Sans';
    src: url('../fonts/Stevie Sans Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/*============ 1. Body and Core Css ============*/

/* Color Theme Variables - สีธีม: ดำ 50%, เหลือง 15%, ขาว 35% */
:root {
    /* Primary Black Colors (50% of theme) */
    --color-black: #000000;
    --color-black-light: #2d2d2d;
    --color-black-dark: #000000;
    --color-black-medium: #212121;
    
    /* Yellow Accent Colors (15% of theme) */
    --color-yellow: #f4d03f;
    --color-yellow-light: #f7dc6f;
    --color-yellow-dark: #f1c40f;
    
    /* White Colors (35% of theme) */
    --color-white: #ffffff;
    --color-white-soft: #fafafa;
    --color-white-gray: #f5f5f5;
    
    /* Text Colors - stick to theme */
    --color-text-primary: var(--color-black);
    --color-text-secondary: var(--color-black-light);
    --color-text-light: var(--color-white);
    --color-text-accent: var(--color-yellow-dark);
    
    /* Background Colors - stick to theme */
    --bg-primary: var(--color-black);
    --bg-secondary: var(--color-white-soft);
    --bg-accent: var(--color-yellow);
    --bg-white: var(--color-white);
}

* {
    margin: 0;
    padding: 0;
}

html {
    height: auto; /* เปลี่ยนจาก 100% เป็น auto */
    overflow-x: hidden; /* ซ่อนแนวนอนเท่านั้น */
}

body {
    font-family: 'Aoboshi One', serif;
    font-weight: 400;
    color: var(--color-text-primary);
    background-color: var(--bg-white);
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Aoboshi One', serif;
    color: var(--color-text-primary);
}

h2 {
    font-weight: 700;
    position: relative;
}

/* Add yellow accent to main section headings */
section h2.text-uppercase:after,
.page-header h1:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-white) 0%, var(--color-white-soft) 100%);
    border-radius: 2px;
}

h3,
h4,
h5,
h6 {
    font-weight: 600;
}

p {
    color: var(--color-text-secondary);
    line-height: 28px;
}

a {
    color: var(--color-text-primary);
}

a:hover {
    text-decoration: none;
    color: var(--color-yellow-dark);
}

a:hover,
a:focus {
    outline: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

section {
    overflow: visible; /* เปลี่ยนเป็น visible เพื่อให้ scroll ได้ */
}


/*Margins*/

.padtop-20 {
    padding-top: 20px;
}
.padtop-40 {
    padding-top: 40px;
}
.padtop-60 {
    padding-top: 60px;
}
.padtop-90 {
    padding-top: 90px;
}
.padbtm-20 {
    padding-bottom: 20px;
}
.padbtm-40 {
    padding-bottom: 40px;
}
.padbtm-60 {
    padding-bottom: 60px;
}
.padbtm-90 {
    padding-bottom: 90px;
}
.martop-20 {
    margin-top: 20px;
}
.martop-40 {
    margin-top: 40px;
}
.martop-60 {
    margin-top: 60px;
}
.marbtm-20 {
    margin-bottom: 20px;
}
.marbtm-40 {
    margin-bottom: 40px;
}
.marbtm-60 {
    margin-bottom: 60px;
}

.main-button {
    text-decoration: none;
    border: 2px solid var(--color-yellow);
    color: var(--color-text-primary);
    background-color: var(--color-yellow);
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    border-radius: 25px;
}

.main-button.yellow-theme {
    background: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-yellow-dark) 100%);
    border: none;
    color: var(--color-black);
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(244, 208, 63, 0.3);
}

.main-button.yellow-theme:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(244, 208, 63, 0.4);
}

.main-button:hover {
    border: 2px solid var(--color-black);
    background: var(--color-black);
    color: var(--color-white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.main-button:hover,
.main-button:focus {
    outline: none;
}

.main-button.success {
    border-color: var(--color-yellow-dark);
    color: var(--color-yellow-dark);
}

.main-button.success:hover {
    background-color: var(--color-yellow-dark);
    color: var(--color-white);
}

.main-button.error {
    border-color: var(--color-black);
    color: var(--color-black);
}

.main-button.error:hover {
    background-color: var(--color-black);
    color: var(--color-white);
}

.wave {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    left: 0;
    fill: var(--color-white);
    z-index: 1;
    visibility: hidden;
}

/* Fallback for browsers that don't support CSS mask */
@supports not (-webkit-mask-image: url("test.svg")) {
    .tear-paper {
        background: transparent;
        border-bottom: 3px solid var(--color-white);
        height: 50px;
    }
    
    .tear-paper.secondary {
        border-bottom-color: var(--color-white-gray);
    }
    
    .tear-paper.footer {
        border-bottom-color: var(--bg-primary);
        border-top: 3px solid var(--bg-primary);
        border-bottom: none;
    }
}

.wave-primary {
    position: relative;
    background: var(--bg-primary);
}

.wave-primary .wave {
    fill: var(--color-white);
    display: block;
    visibility: visible;
}

.wave-secondary {
    position: relative;
    background: var(--color-white);
}

.wave-secondary .wave {
    fill: var(--color-white-gray);
    visibility: visible;
}

.wave-footer {
    position: relative;
    background: var(--bg-primary);
}

.wave-footer .wave {
    fill: var(--bg-primary);
    visibility: visible;
    top: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}


/*============ Page Header ============*/

.page-header {
    padding: 160px 0 100px 0;
    text-align: center;
    background: var(--bg-primary);
    color: var(--color-white);
    position: relative;
}

.page-header h1 {
    font-family: 'Stevie Sans', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 50px;
    margin-bottom: 15px;
    color: var(--color-yellow);
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
}

/* Text Masking Animation */
.page-header h1.text-reveal {
    position: relative;
    display: inline-block;
}

.page-header h1.text-reveal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    transform-origin: left;
    animation: revealText 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes revealText {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(1);
        transform-origin: left;
    }
    51% {
        transform: scaleX(1);
        transform-origin: right;
    }
    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}

.page-header .lead {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-light);
    margin-bottom: 0;
    overflow: hidden;
}


/*============ 2. Preloader ============*/

body.loaded p {
    opacity: 1;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}

#loader-wrapper .loader-section {
    position: fixed;
    top: -500%;
    width: 101%;
    height: 1000%;
    background: var(--bg-primary);
    z-index: 1000;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

#loader-wrapper .loader-section.section-left {
    left: -50%;
}

#loader-wrapper .loader-section.section-right {
    right: -50%;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded .loading {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
    visibility: hidden;
}

.loading {
    z-index: 1001;
    display: inline-block;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    margin-top: -35px;
    margin-left: -35px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 10px solid transparent;
    border-left: 10px solid var(--color-yellow);
    border-bottom: 10px solid var(--color-yellow);
    -webkit-animation: spin-one 2s linear infinite;
    animation: spin-one 2s linear infinite;
}

.loading:before,
.loading:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 10px solid transparent;
    border-left: 10px solid var(--color-yellow-light);
    border-bottom: 10px solid var(--color-yellow-light);
}

.loading:before {
    -webkit-animation: spin-two 1s linear infinite;
    animation: spin-two 1s linear infinite;
}

.loading:after {
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
}

@-webkit-keyframes spin-one {
    0% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    100% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(360deg);
        transform: rotateX(0) rotateY(0) rotateZ(360deg);
    }
}

@keyframes spin-one {
    0% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    100% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(360deg);
        transform: rotateX(0) rotateY(0) rotateZ(360deg);
    }
}

@-webkit-keyframes spin-two {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
}

@keyframes spin-two {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
}


/*============ 3 .Navbar ============*/

.navbar {
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    transition: all 0.2s ease;
    background: none;
}

/* Special styling for sub-pages with page-header */


.navbar .navbar-brand img {
    max-width: 180px;
    height: auto;
    transition: all 0.3s ease;
}

.navbar .navbar-toggler {
    border: none;
}

.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:hover {
    outline: none;
}

.navbar .navbar-nav .back-button {
    color: var(--color-white);
    padding: 8px 20px;
    background: var(--color-yellow);
    border-radius: 20px;
    border: 2px solid var(--color-yellow);
    transition: all 0.3s ease;
    font-weight: 600;
}

.navbar .navbar-nav .back-button:hover {
    background: transparent;
    color: var(--color-yellow);
}

.navbar-nav .nav-link {
    font-family: 'Aoboshi One', serif;
    font-weight: 400;
    color: var(--color-white);
    transition: all 0.15s ease;
    position: relative;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

/* Active state styling for normal navbar */
.navbar-nav .nav-link.active {
    color: var(--color-yellow) !important;
    background-color: transparent !important;
    font-weight: 700;
    transition: all 0.1s ease;
    position: relative;
}

/* Active state styling for fixed navbar - yellow text when active */
.navbar-scroll-fixed .navbar-nav .nav-link.active {
    color: var(--color-yellow-dark) !important;
    background-color: transparent !important;
    font-weight: 700;
    transition: all 0.1s ease;
    position: relative;
}

/* Add underline effect for active state on both navbar types */
.navbar-nav .nav-link.active:after,
.navbar-scroll-fixed .navbar-nav .nav-link.active:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: var(--color-yellow);
    border-radius: 2px;
}

.navbar-nav .nav-link:hover {
    color: var(--color-yellow) !important;
}

.navbar-scroll-fixed {
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed;
    background-color: var(--color-white) !important;
    -webkit-box-shadow: 0 1px 70px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 70px rgba(0, 0, 0, 0.15);
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.navbar-scroll-fixed .navbar-nav .nav-link {
    color: var(--color-text-primary) !important;
    position: relative;
    transition: all 0.15s ease;
}

/* Active state styling for fixed navbar - yellow text when active */
.navbar-scroll-fixed .navbar-nav .nav-link.active {
    color: var(--color-yellow-dark) !important;
    background-color: transparent !important;
    font-weight: 700;
    transition: all 0.1s ease;
}

/* Instant feedback on click for fixed navbar */
.navbar-scroll-fixed .navbar-nav .nav-link:active {
    transform: scale(0.98);
    transition: transform 0.05s ease;
}

/* Add underline effect for active state */
.navbar-scroll-fixed .navbar-nav .nav-link.active:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: var(--color-yellow-dark);
    border-radius: 2px;
}

.navbar-scroll-fixed .navbar-nav .nav-link:hover {
    color: var(--color-yellow-dark) !important;
}

.navbar-scroll-fixed .navbar-nav .back-button {
    color: var(--color-text-primary) !important;
    background: var(--color-yellow);
}

.navbar-scroll-fixed .navbar-nav .back-button:hover {
    background: var(--color-black);
    color: var(--color-white) !important;
    border-color: var(--color-black);
}


/*============ Home Page ============*/


/*============ 4. Home Banner Section ============*/

/*Banner Section*/
#banner {
    background-position: top center;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    min-height: 100vh;
    height: 100vh; /* บังคับให้เต็มจอ */
    overflow: hidden; /* ซ่อนส่วนเกิน */
}

/* Video Background Styling */
#banner-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100vw; /* บังคับให้เต็มความกว้างจอ */
    height: 100vh; /* บังคับให้เต็มความสูงจอ */
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

/* Mobile video optimization */
@media (max-width: 768px) {
    #banner-video {
        min-width: 100vh;
        min-height: 100vw;
    }
}

/* Fallback background for slow loading */
#banner.banner-video {
    background: linear-gradient(135deg, var(--color-black) 0%, var(--color-black-light) 100%);
}

#banner:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.6) 0%, rgba(45, 45, 45, 0.6) 100%);
    z-index: 2;
}

#banner .banner-text {
    text-align: center;
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#banner .banner-text h1 {
    font-family: 'Stevie Sans', sans-serif;
    font-weight: 900;
    color: var(--color-white);
    font-size: 60px;
    line-height: 100px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

#banner .banner-text #typed {
    color: var(--color-yellow);
    font-size: 32px;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}


/*Animations*/

/*Typed Cursor Blink*/

.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    font-size: 35px;
    font-weight: 900;
    color: var(--color-yellow);
    font-family: 'Stevie Sans', sans-serif;
}

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

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*============ 5. About Section ============*/

#about {
    padding-top: 0;
    padding-bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
                url('https://res.cloudinary.com/dpbrfzz6c/image/upload/f_auto,q_auto,w_1600/v1768215316/CZD2-804_unk3sj.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    min-height: 100vh;
    margin-top: -50px; /* ขึ้นไปทับ Video section */
    z-index: 5; /* ให้อยู่เหนือ Video section */
    display: flex;
    align-items: center; /* จัดกลางแนวตั้ง */
    -webkit-mask-image: url('../images/resources/TEAR PAPER SVG/tearPaper2.svg'), linear-gradient(#fff 0 0);
    mask-image: url('../images/resources/TEAR PAPER SVG/tearPaper2.svg'), linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat, repeat;
    mask-repeat: no-repeat, repeat;
}

/* About Intro Left - ข้อความด้านซ้าย */
#about .about-intro-left {
    padding: 0;
    background: transparent;
}

/* กล่องหน้ากาก: ซ่อนสิ่งที่ล้นออกมา */
.text-mask-wrapper {
    overflow: hidden;
    line-height: 1.1; /* ปรับให้พอดีกับความสูงตัวหนังสือ */
}

/* ตั้งค่าเริ่มต้นให้มองไม่เห็นก่อนอนิเมชั่น */
.story-title {
    opacity: 0; /* กันกระพริบตอนโหลด */
}

.story-desc {
    opacity: 0; /* กันกระพริบตอนโหลด */
}

#about .about-intro-left h2 {
    color: var(--color-yellow) !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    font-size: 3.5rem;
    font-weight: bold;
}

#about .about-intro-left p {
    color: var(--color-white) !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    font-size: 1.1rem;
}

#about .about-info-container {
    background-color: var(--color-white);
    padding: 50px 30px;
    border-radius: 15px;
    margin-top: 60px;
    -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-top: 4px solid var(--color-yellow);
}

#about .about-info-container:hover {
    -webkit-box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

#about .about-info-container .about-info {
    text-align: right;
    padding-right: 50px;
}

#about .about-info-container .about-info .info-item img {
    width: 100px;
    -webkit-border-radius: 90px;
    border-radius: 90px;
    border: 5px solid var(--color-yellow);
    margin-bottom: 20px;
}

#about .about-info-container .about-info .info-item p {
    margin-bottom: 10px;
}

#about .about-info-container .about-info .info-item span {
    font-family: 'Stevie Sans', sans-serif;
    font-weight: 500;
    color: var(--color-text-primary);
}

#about .about-info-container .about-skills {
    padding-left: 50px;
}

#about .about-info-container .about-skills h3 {
    font-weight: 700;
    margin-bottom: 20px;
}

#about .about-info-container .about-skills .progress-box {
    margin-bottom: 20px;
}

#about .about-info-container .about-skills .progress-box p {
    text-transform: uppercase;
    font-family: 'Stevie Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--color-text-primary);
}

#about .about-info-container .about-skills .progress-box .progress {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 8px;
    background-color: var(--color-white-gray);
}

#about .about-info-container .about-skills .progress-box .progress .progress-bar {
    background: linear-gradient(90deg, var(--color-yellow-dark) 0%, var(--color-yellow) 100%);
    width: 0;
    border-radius: 10px;
    /* ลบ transition ออก ให้ GSAP จัดการ */
}

/* Mission & Vision styling */
.mission-vision-item {
    background: var(--color-white);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border-top: 4px solid var(--color-yellow);
    overflow: hidden;
    position: relative;
    /* ลบ transition ออกเพราะใช้ GSAP แทน */
}

.mission-vision-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(244, 208, 63, 0.1), transparent);
    transition: left 0.6s ease;
}

.mission-vision-item:hover::before {
    left: 100%;
}

.mission-vision-item h3 {
    color: var(--color-text-primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.mission-vision-item h3 i {
    color: var(--color-yellow-dark);
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.mission-vision-item:hover h3 i {
    transform: scale(1.2) rotate(5deg);
}

/* About Section Enhanced Animations */
.about-image-container {
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    margin-bottom: 30px;
    /* เพิ่ม hardware acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.about-image-zoom {
    display: block;
    width: 100%;
    /* ลบ transition ออก ให้ GSAP จัดการ */
}

.progress-animate {
    position: relative;
    overflow: visible;
}

.progress-animate::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: var(--color-white);
    box-shadow: 0 0 10px rgba(244, 208, 63, 0.8);
    border-radius: 2px;
}


/*============ 6. Services Section ============*/

#services {
    padding-top: 120px;
    padding-bottom: 110px;
    background-color: var(--color-white);
}

/* Home Services Preview - Extended Height */
.home-services-preview {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
}

/* Responsive adjustments for home services */
@media (max-width: 768px) {
    .home-services-preview {
        padding-top: 120px !important;
        padding-bottom: 120px !important;
    }
}

@media (max-width: 576px) {
    .home-services-preview {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
}

#services .services-item {
    text-align: center;
    padding: 40px 30px;
    background-color: var(--color-white);
    margin-bottom: 50px;
    border-radius: 15px;
    border: 2px solid var(--color-white-gray);
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#services .services-item:hover {
    -webkit-box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-8px);
    border-color: var(--color-yellow);
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-white-gray) 100%);
}

#services .services-item .fa {
    margin-bottom: 20px;
    font-size: 48px;
    color: var(--color-yellow-dark);
    transition: all 0.3s ease;
}

#services .services-item:hover .fa {
    color: var(--color-black);
    transform: scale(1.1);
}

#services .services-item h3 {
    font-family: 'Stevie Sans', sans-serif;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text-primary);
}


/*============ 7. Portfolio Section ============*/

#portfolio {
    padding-top: 120px;
    padding-bottom: 130px;
    background-color: var(--bg-secondary);
    min-height: 100vh;
    position: relative;
}

/* Portfolio Header Responsive */
.portfolio-header h2 {
    font-size: 2.5rem;
}

.portfolio-header p {
    font-size: 1.1rem;
}

@media (max-width: 992px) {
    #portfolio {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    
    .portfolio-header h2 {
        font-size: 2.2rem;
        margin-bottom: 25px !important;
    }
    
    .portfolio-header p {
        font-size: 1rem;
        margin-bottom: 35px !important;
    }
}

@media (max-width: 768px) {
    #portfolio {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    .portfolio-header h2 {
        font-size: 1.8rem;
        margin-bottom: 20px !important;
    }
    
    .portfolio-header p {
        font-size: 0.95rem;
        margin-bottom: 30px !important;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    #portfolio {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    .portfolio-header h2 {
        font-size: 1.5rem;
        margin-bottom: 15px !important;
    }
    
    .portfolio-header p {
        font-size: 0.85rem;
        margin-bottom: 25px !important;
        padding: 0 10px;
    }
}

.portfolio-header .portfolio-filter {
    padding-top: 5px;
    text-align: center;
}

.portfolio-header .portfolio-filter ul {
    margin: auto;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0px;
    gap: 15px;
}

.portfolio-header .portfolio-filter ul li {
    float: none;
    color: #333;
    list-style: none;
    margin-right: 0;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Aoboshi One', serif;
    font-weight: 400;
    padding: 12px 24px;
    border-radius: 0;
    transition: all 0.3s ease;
    border: 2px solid #ddd;
    background: #fff;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.portfolio-header .portfolio-filter ul li .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.portfolio-header .portfolio-filter ul li::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--color-yellow);
    transition: width 0.3s ease;
}

.portfolio-header .portfolio-filter ul li:hover {
    color: #000;
    border-color: var(--color-yellow);
    background-color: rgba(244, 208, 63, 0.1);
    transform: translateY(-2px);
}

.portfolio-header .portfolio-filter ul li:hover .filter-count {
    background: rgba(244, 208, 63, 0.3);
}

.portfolio-header .portfolio-filter ul li:hover::before {
    width: 100%;
}

.portfolio-header .portfolio-filter ul li.sel-item {
    color: #fff !important;
    font-weight: 400;
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
    box-shadow: 0 4px 15px rgba(244, 208, 63, 0.4);
}

.portfolio-header .portfolio-filter ul li.sel-item .filter-count {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.portfolio-header .portfolio-filter ul li.sel-item::before {
    width: 100%;
}

/* Portfolio Filter Responsive */
@media (max-width: 992px) {
    .portfolio-header .portfolio-filter ul {
        gap: 12px;
    }
    
    .portfolio-header .portfolio-filter ul li {
        font-size: 14px;
        padding: 10px 20px;
    }
    
    .portfolio-header .portfolio-filter ul li .filter-count {
        min-width: 22px;
        height: 22px;
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .portfolio-header .portfolio-filter ul {
        gap: 10px;
    }
    
    .portfolio-header .portfolio-filter ul li {
        font-size: 13px;
        padding: 8px 16px;
    }
    
    .portfolio-header .portfolio-filter ul li .filter-count {
        min-width: 20px;
        height: 20px;
        font-size: 10px;
    }
}

@media (max-width: 576px) {
    .portfolio-header .portfolio-filter ul {
        gap: 8px;
    }
    
    .portfolio-header .portfolio-filter ul li {
        font-size: 11px;
        padding: 6px 12px;
        gap: 6px;
    }
    
    .portfolio-header .portfolio-filter ul li .filter-count {
        min-width: 18px;
        height: 18px;
        font-size: 9px;
        padding: 0 4px;
    }
    
    .portfolio-header .portfolio-filter ul li .filter-text {
        display: inline;
    }
}

.portfolio-header .portfolio-filter ul li li:last-child {
    margin-right: 0;
}

.portfolio-items {
    padding-bottom: 40px;
    margin-left: -2.5px;
    margin-right: -2.5px;
    position: relative;
    transition: height 0.6s ease; /* Smooths the height change of the container */
}

.portfolio-items .single-item {
    margin-bottom: 30px;
}

.portfolio-items .single-item .popup {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.portfolio-items .single-item .popup img {
    width: 100%;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}

.portfolio-items .single-item .popup:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    -webkit-transition: background-color .6s ease-in-out;
    -o-transition: background-color .6s ease-in-out;
    transition: background-color .6s ease-in-out;
}

.portfolio-items .single-item .popup:hover:after {
    background: linear-gradient(135deg, rgba(244, 208, 63, 0.8) 0%, rgba(26, 26, 26, 0.8) 100%);
}

.portfolio-items .single-item .popup:hover img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

/* YouTube Music Video Styling */
.portfolio-items .single-item .popup-youtube {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.portfolio-items .single-item .popup-youtube:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.portfolio-items .single-item .popup-youtube img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}

.portfolio-items .single-item .popup-youtube:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    border-radius: 15px;
    background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
    -webkit-transition: background .6s ease-in-out;
    -o-transition: background .6s ease-in-out;
    transition: background .6s ease-in-out;
}

.portfolio-items .single-item .popup-youtube:hover:after {
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.2) 100% /* จากดำ เปลี่ยนเป็นขาวโปร่ง */
    );
}

.portfolio-items .single-item .popup-youtube:hover img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1);
}

/* YouTube Play Button Overlay */
.portfolio-items .single-item .popup-youtube:before {
    content: "\f04b";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-white);
    font-size: 52px;
    z-index: 4;
    opacity: 1;
    transition: all 0.3s ease;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    background: rgba(244, 208, 63, 0.9);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    padding-left: 4px;

}

.portfolio-items .single-item .popup-youtube:hover:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Enhanced Portfolio Overlay for Music Videos */
.music-video .portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    color: var(--color-white);
    padding: 25px 20px 20px;
    z-index: 5;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    border-radius: 0 0 15px 15px;
}

.music-video .portfolio-item:hover .portfolio-overlay {
    transform: translateY(0);
}

.music-video .portfolio-info h4 {
    color: var(--color-white);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-video .portfolio-info p {
    color: var(--color-yellow);
    font-size: 13px;
    margin: 0;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Music Video Genre Badge */
.music-video .portfolio-overlay:before {
    content: "🎵";
    position: absolute;
    top: -40px;
    right: 15px;
    background: var(--color-yellow);
    color: var(--color-text-primary);
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 6;
}

.music-video .portfolio-item:hover .portfolio-overlay:before {
    opacity: 1;
    top: -25px;
}

/* Loading State */
#music-videos-container.loading {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary);
}

#music-videos-container.loading:before {
    content: "Loading music videos...";
    font-size: 16px;
}

/* Error State */
#music-videos-container.error {
    text-align: center;
    padding: 40px;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 10px;
    margin: 20px 0;
}


/*============ 8. Blog Section ============*/

#blog {
    background-color: var(--color-white);
    padding-top: 120px;
    padding-bottom: 160px;
}

.blog-post {
    color: var(--color-text-primary);
    margin-bottom: 40px;
}

.blog-post:hover {
    color: #000;
    text-decoration: none;
}

.blog-post .post-image {
    position: relative;
}

.blog-post .post-image img {
    width: 100%;
}

.blog-post .post-image:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: .3;
    z-index: 1;
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}

.blog-post .post-image:hover:before {
    opacity: 0;
}

.blog-post .post-title {
    font-size: 18px;
    line-height: 25px;
    padding-top: 30px;
    padding-bottom: 15px;
    margin-bottom: 0;
    font-family: 'Stevie Sans', sans-serif;
    font-weight: 700;
}

.blog-post .post-body {
    font-size: 15px;
    line-height: 25px;
}

.blog-post .post-meta {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-secondary);
    float: right;
}

.blog-post .post-meta span {
    color: #000;
    font-weight: 600;
}

.view-more-button {
    text-align: center;
    margin-top: 20px;
}

.view-more-button a {
    display: inline-block;
}


/*============ 9. Contact Section ============*/

#contact {
    padding-top: 120px;
    padding-bottom: 160px;
    background: var(--color-white);
    color: var(--color-black);
}

#contact h2 {
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 24px;
    color: var(--color-black);
}

#contact .contact-item h4 {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 21px;
    font-family: 'Stevie Sans', sans-serif;
    color: var(--color-yellow);
}

#contact .contact-item p {
    font-size: 14px;
    line-height: 24px;
    color: var(--color-black-light);
}

#contact form .form-group {
    margin-bottom: 24px;
}

#contact form .form-group .form-control {
    font-size: 14px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: var(--color-white-soft);
    border: 2px solid rgba(244, 208, 63, 0.3);
    border-bottom: 2px solid var(--color-yellow);
    height: 52px;
    color: var(--color-black);
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

#contact form .form-group .form-control::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

#contact form .form-group textarea.form-control {
    height: auto;
}

#contact form .form-group .con-error {
    border-color: var(--color-yellow-dark);
}

#contact form .form-control:hover,
#contact form .form-control:active,
#contact form .form-control:focus {
    -webkit-box-shadow: 0 0 15px rgba(244, 208, 63, 0.3);
    box-shadow: 0 0 15px rgba(244, 208, 63, 0.3);
    border-color: var(--color-yellow);
    background-color: var(--color-white);
}


/*============ ScrollSmoother Wrapper ============*/

#smooth-wrapper {
    overflow: hidden;
}

#smooth-content {
    overflow: visible;
}

/* Text Reveal Animation Wrapper */
.reveal-text-wrapper {
    overflow: hidden;
    display: block;
    line-height: 1.2;
}

/* Image Parallax Container */
.img-parallax-container {
    overflow: hidden;
}

.about-image-container {
    overflow: hidden;
}


/*============ Featured Works Section ============*/

#featured-works {
    padding: 100px 0;
    position: relative;
}

#featured-works .section-heading {
    margin-bottom: 60px;
}

.works-grid {
    margin-bottom: 40px;
}

.work-item {
    margin-bottom: 40px;
}

.work-card {
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.work-card:hover {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.work-image {
    position: relative;
    width: 100%;
    padding-bottom: 66.67%; /* 3:2 aspect ratio */
    overflow: hidden;
}

.work-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.work-card:hover .work-image img {
    transform: scale(1.1);
}

.work-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.4s ease;
    text-align: center;
}

.work-overlay h3 {
    color: var(--color-white);
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 700;
}

.work-overlay p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin: 0;
}

.work-info {
    padding: 25px;
    flex: 1;
}

.work-info h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 8px;
}

.work-category {
    color: #666;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.cta-button {
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: 2px solid var(--color-yellow);
    background-color: var(--color-yellow);
    color: var(--color-black);
}

.cta-button:hover {
    background-color: transparent;
    color: var(--color-yellow);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(244, 208, 63, 0.3);
}


/*============ Clients Section ============*/

#clients {
    padding: 100px 0;
    position: relative;
}

#clients .section-heading {
    margin-bottom: 60px;
}

.clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.client-item {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.client-logo {
    width: 100%;
    max-width: 180px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.client-logo:hover {
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.client-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}


/*============ Location Section ============*/

#location {
    padding: 100px 0;
    position: relative;
}

#location .section-heading {
    margin-bottom: 60px;
}

.location-info {
    padding-right: 30px;
}

.info-box {
    background: var(--color-white);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.info-box h3 {
    color: var(--color-black);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.info-box h4 {
    color: var(--color-black);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.info-box i {
    color: var(--color-yellow);
    margin-right: 10px;
}

.map-container {
    padding-left: 30px;
}

.map-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    height: 500px;
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/*============ Responsive for New Sections ============*/

@media (max-width: 991px) {
    .location-info {
        padding-right: 15px;
        margin-bottom: 40px;
    }
    
    .map-container {
        padding-left: 15px;
    }
    
    .work-image {
        padding-bottom: 75%; /* 4:3 on tablets */
    }
}

@media (max-width: 767px) {
    #featured-works,
    #clients,
    #location {
        padding: 60px 0;
    }
    
    .work-overlay h3 {
        font-size: 20px;
    }
    
    .work-overlay p {
        font-size: 14px;
    }
    
    .client-logo {
        max-width: 140px;
        height: 100px;
    }
    
    .location-info,
    .map-container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .map-wrapper {
        height: 350px;
    }
}


/*============ 10. Footer ============*/

footer {
    padding-top: 80px;
    padding-bottom: 40px;
    background-color: var(--color-black); /* Darker, cleaner background */
    text-align: center;
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--color-yellow), #f39c12);
}

footer ul.social-icons {
    padding: 0;
    margin: 0 0 30px 0;
    list-style-type: none;
}

footer ul.social-icons li {
    display: inline-block;
    margin: 0 15px;
}

footer ul.social-icons li:first-child {
    margin-left: 0;
}

footer ul.social-icons li:last-child {
    margin-right: 0;
}

footer ul.social-icons li a {
    color: var(--color-white);
    font-size: 18px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border: 2px solid var(--color-yellow);
    border-radius: 50%;
    display: inline-block;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

footer ul.social-icons li a:hover {
    color: var(--color-black);
    background-color: var(--color-yellow);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(244, 208, 63, 0.4);
}

footer p {
    color: #888;
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: 0.5px;
}

footer p strong {
    color: #fff;
}

.footer-logo img {
    width: 250px;
    height: auto;
}

/*============ Blog And Single-Blog Page ============*/

/*============ 11. Blog Post Page Banner ============*/

.blog-banner {
    padding: 150px 0;
    text-align: center;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--color-black-light) 100%);
    color: var(--color-white);
}

.blog-banner h1 {
    font-size: 46px;
    color: var(--color-white);
    text-transform: capitalize;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 17px;
}

.blog-banner .bread-crumb a {
    color: var(--color-yellow);
}


/*============ 12. Blog Post Page Main Area ============*/

#blog-posts-area,
#single-blog-area {
    background-color: var(--bg-secondary);
    padding: 100px 0;
}

.blog-featured-image {
    overflow: hidden;
    max-height: 400px;
    border-radius: 10px;
}

.blog-meta span {
    font-size: 13px;
    text-transform: uppercase;
    margin-right: 15px;
    color: var(--color-yellow-dark);
    font-weight: 600;
}

.blog-content {
    margin-top: 12px;
}

#blog-posts-area .single-blog,
#single-blog-area .single-blog-details {
    padding: 40px;
    margin-bottom: 50px;
    background-color: var(--color-white);
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    border-top: 4px solid var(--color-yellow);
}

#blog-posts-area .single-blog h2,
#single-blog-area .single-blog-details h2 {
    margin: 20px 0 5px;
    font-size: 24px;
    font-weight: 600;
}

#blog-posts-area .pagination {
    margin: 0;
}

#blog-posts-area .pagination ul {
    list-style: outside none none;
}

#blog-posts-area .pagination ul li {
    display: inline-block;
}

#blog-posts-area .pagination ul li a {
    background-color: var(--color-white);
    color: var(--color-text-secondary);
    display: block;
    font-size: 20px;
    font-weight: 500;
    height: 35px;
    line-height: 34px;
    margin-right: 5px;
    text-align: center;
    width: 35px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

#blog-posts-area .pagination ul li.active a,
#blog-posts-area .pagination ul li:hover a {
    background-color: var(--color-yellow);
    color: var(--color-black);
}

#blog-posts-area #sidebar .widget,
#single-blog-area #sidebar .widget {
    padding: 20px;
    background-color: #fff;
    margin-bottom: 40px;
}

#blog-posts-area #sidebar .widget .widget-heading,
#single-blog-area #sidebar .widget .widget-heading {
    font-size: 22px;
    margin-bottom: 20px;
    text-transform: capitalize;
    font-weight: 600;
}

#blog-posts-area #sidebar .search-form,
#single-blog-area #sidebar .search-form {
    width: 100%;
    background-color: var(--color-white-gray);
}

#blog-posts-area #sidebar .search-form input[type="search"],
#single-blog-area #sidebar .search-form input[type="search"] {
    padding: 15px;
    border: none;
    background: transparent;
    width: 80%;
    color: #000;
}

#blog-posts-area #sidebar .search-form button[type="submit"],
#single-blog-area #sidebar .search-form button[type="submit"] {
    border: none;
    color: #fff;
    float: right;
    padding: 14px;
    width: 20%;
    cursor: pointer;
    background: #000;
    border: 1px solid #000;
}

#blog-posts-area #sidebar .featured-post p,
#single-blog-area #sidebar .featured-post p {
    margin-top: 10px;
}

#blog-posts-area #sidebar .social .social-icons,
#single-blog-area #sidebar .social .social-icons {
    list-style: outside none none;
    padding: 0;
    margin: 0;
}

#blog-posts-area #sidebar .social .social-icons li,
#single-blog-area #sidebar .social .social-icons li {
    line-height: 22px;
    display: inline-block;
    margin-right: 8px;
}

#blog-posts-area #sidebar .social .social-icons li a,
#single-blog-area #sidebar .social .social-icons li a {
    padding-bottom: 8px;
    display: block;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid var(--color-white-gray);
    color: var(--color-text-secondary);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 16px;
    text-align: center;
}

#blog-posts-area #sidebar .social .social-icons li a:hover,
#single-blog-area #sidebar .social .social-icons li a:hover {
    background-color: #000;
    color: #fff;
}

.single-blog-details blockquote {
    font-size: 14px;
    font-style: italic;
    line-height: 30px;
    background-color: var(--color-white-gray);
    margin-top: 15px;
    margin-bottom: 15px;
    border-left: 5px solid var(--color-black);
    padding: 10px 20px;
    margin: 0 0 20px;
}

.discussion-list-area {
    padding: 30px;
    margin-bottom: 50px;
    background-color: #fff;
}

.discussion-list-area .discussion-title {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 21px;
}

.discussion-list-area ul.discussion-list {
    list-style: none;
}

.discussion-list-area ul.discussion-list li.discussion-item {
    border-bottom: 1px solid var(--color-white-gray);
    margin-bottom: 40px;
    padding-bottom: 25px;
}

.discussion-list-area ul.discussion-list li.discussion-item:last-child {
    border-bottom: none;
}

.discussion-meta h5 {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 14px;
}

.discussion-meta p {
    font-size: 12px;
}

.discussion-reply-link {
    font-weight: 600;
}

.discussion-reply-link:hover {
    color: #000;
}

.row.reply-area {
    margin-left: 120px;
    margin-top: 40px;
}

.discussion-form-container {
    background-color: #fff;
    padding: 30px;
    margin-bottom: 50px;
}

.discussion-form-container h3 {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 21px;
}

.discussion-form-container .form-control {
    background: var(--color-white-gray);
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 15px;
    height: 45px;
}

.discussion-form-container textarea.form-control {
    height: auto;
    resize: none;
}


/*============ 13. Site Mobile Responsive ============*/

/*Responsive Max Width 992px*/

@media screen and (max-width: 992px) {
    #banner .banner-text h1 {
        font-size: 50px;
    }
    #banner .banner-text #typed {
        font-size: 30px;
    }
    #banner .banner-text .typed-cursor {
        font-size: 30px;
    }
    #about .about-info-container .about-info {
        text-align: center;
        margin-bottom: 60px;
        padding-right: 15px;
    }
    #about .about-info-container .about-skills {
        padding-left: 15px;
    }
    #about .about-info-container .about-skills h3 {
        text-align: center;
    }
    #blog-posts-area .pagination {
        margin-bottom: 50px;
    }
    .wave {
        height: 25px;
    }
    
    /* Page Header responsive for tablet */
    .page-header {
        padding: 110px 0 70px 0;
    }
    
    .page-header h1 {
        font-size: 38px;
        line-height: 46px;
    }
    
    .page-header .lead {
        font-size: 18px;
    }
}


/*Max Width 768px*/

@media screen and (max-width: 767px) {
    #banner .banner-text h1 {
        font-size: 32px;
        line-height: 50px;
    }
    #banner .banner-text #typed {
        font-size: 20px;
    }
    #banner .banner-text .typed-cursor {
        font-size: 20px;
    }
    .navbar .navbar-brand img {
        max-width: 150px;
        height: auto;
    }
    .navbar.navbar-dark .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.9);
        text-align: center;
    }
    .navbar.navbar-dark .navbar-collapse li.nav-item {
        border-bottom: 1px solid var(--color-black-light);
        margin-bottom: 4px;
    }
    .navbar.navbar-dark .navbar-collapse li.nav-item:last-child {
        margin-bottom: 0;
        border-bottom: 0px;
    }
    .navbar.navbar-light {
        text-align: center;
    }
    .navbar.navbar-light li.nav-item {
        border-bottom: 1px solid var(--color-white-gray);
        margin-bottom: 4px;
    }
    .navbar.navbar-light li.nav-item:last-child {
        margin-bottom: 0;
        border-bottom: 0;
    }
    #contact .message-box h2 {
        margin-top: 50px;
        text-align: left !important;
    }
    .blog-banner h1 {
        font-size: 32px;
    }
    .blog-banner .bread-crumb a {
        font-size: 14px;
    }
    .row.reply-area {
        margin-left: 40px;
        margin-top: 20px;
    }
    
    /* Page Header responsive */
    .page-header {
        padding: 100px 0 60px 0;
    }
    
    .page-header h1 {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: 1px;
    }
    
    .page-header .lead {
        font-size: 16px;
    }
}


#see-more-btn {
    background: linear-gradient(135deg, var(--color-yellow) 0%, #f39c12 100%);
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    color: var(--color-white);
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(244, 208, 63, 0.3);
    position: relative;
    overflow: hidden;
}

#see-more-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(244, 208, 63, 0.4);
    background: linear-gradient(135deg, #f39c12 0%, var(--color-yellow) 100%);
}

#see-more-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
}

#see-more-btn .btn-loading {
    color: var(--color-white);
}

#see-more-btn .btn-loading i {
    margin-right: 8px;
}

/* Loading animation for the spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fa-spin {
    animation: spin 1s infinite linear;
}

/* Smooth fade-in animation for new video cards */
.music-video.wow.fadeInUp {
    animation-duration: 0.6s;
}

/* Progress indicator styling */
#see-more-container p {
    font-size: 14px;
    margin: 0;
}

/*============ Client Logos Styling ============*/

.client-logos-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary);
    font-size: 16px;
}

.client-logos-loading i {
    margin-right: 10px;
    color: var(--color-yellow);
}

/* Override section background to white for clients page */
#clients {
    background-color: var(--color-white) !important;
}

#clients .wave {
    fill: var(--color-white-gray) !important;
}

/* Custom 5-column grid for client logos */
.col-lg-2-4 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.client-logo-item {
    margin-bottom: 40px;
    padding: 15px;
}

.client-logo-wrapper {
    background: var(--color-white);
    border-radius: 15px;
    padding: 20px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.client-logo-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: var(--color-yellow);
}

.client-logo-wrapper img {
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: cover;
    filter: none;
    opacity: 1;
    transition: all 0.3s ease;
}

.client-logo-wrapper:hover img {
    transform: scale(1.05);
}

/* Industry items styling */
.industry-item {
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 30px;
}

.industry-item h4 {
    color: var(--color-text-primary);
    margin-bottom: 15px;
    font-weight: 600;
}

.industry-item p {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Statistics styling for clients page */
.stat-item {
    padding: 30px 20px;
    margin-bottom: 30px;
}

.stat-item h2 {
    font-size: 48px;
    font-weight: 900;
    color: var(--color-yellow);
    margin-bottom: 10px;
    font-family: 'Stevie Sans', sans-serif;
}

.stat-item p {
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

/* Responsive adjustments for client logos */
@media (max-width: 768px) {
    .client-logo-wrapper {
        height: 220px;
        padding: 40px;
    }
    
    .client-logo-wrapper img {
        max-height: 140px;
    }
    
    .client-logo-item {
        margin-bottom: 25px;
        padding: 10px;
    }
    
    .stat-item h2 {
        font-size: 36px;
    }
}

@media (max-width: 576px) {
    .client-logo-wrapper {
        height: 180px;
        padding: 30px;
    }
    
    .client-logo-wrapper img {
        max-height: 120px;
    }
    
    .stat-item h2 {
        font-size: 28px;
    }
    
    .industry-item {
        padding: 20px 15px;
    }
}

/* ============ Team Member Card Styles ============ */
.team-member {
    background: #ffffff;
    border-radius: 10px; /* Increased radius */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); /* Softer shadow */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.team-member:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.member-photo {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 125%; /* 4:5 aspect ratio for portrait photos */
    border-radius: 15px 15px 0 0;
}

.member-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%; /* Adjusted focus */
    transition: all 0.6s ease;
    filter: grayscale(100%);
}

.team-member:hover .member-photo img {
    transform: scale(1.08);
    filter: grayscale(0%);
}

.member-social {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    display: flex;
    justify-content: center;
    gap: 12px;
    z-index: 2;
}

.team-member:hover .member-social {
    opacity: 1;
    transform: translateY(0);
}

.member-social a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    background: #ffffff;
    border-radius: 50%;
    color: var(--color-black);
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.member-social a:hover {
    background: var(--color-yellow);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(241, 196, 15, 0.4);
}

.member-info {
    padding: 35px 25px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: #ffffff;
    position: relative;
    z-index: 1;
}

.member-info h4 {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.3;
}

.member-info .member-role {
    display: inline-block;
    color: #555;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
    position: relative;
    padding-bottom: 12px;
    transition: color 0.3s ease;
}

.member-info .member-role::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: var(--color-yellow);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.team-member:hover .member-role {
    color: var(--color-black);
}

.team-member:hover .member-role::after {
    width: 80%;
}

/* Team Section Background Enhancement */
#team {
    background: var(--color-white);
    position: relative;
}

#team::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23f1c40f" fill-opacity="0.03"><circle cx="30" cy="30" r="4"/></g></svg>') repeat;
    pointer-events: none;
}

/* Responsive adjustments for team cards */
@media (max-width: 768px) {
    .member-info {
        padding: 20px 15px;
    }
    
    .member-info h4 {
        font-size: 18px;
        margin-bottom: 12px;
    }
    
    .member-info .member-role {
        font-size: 12px;
        letter-spacing: 1px;
        padding-bottom: 10px;
    }
    
    .member-photo {
        padding-bottom: 130%; /* Slightly taller on tablets */
    }
}

@media (max-width: 576px) {
    .member-info h4 {
        font-size: 16px;
    }
    
    .member-info .member-role {
        font-size: 11px;
        padding-bottom: 8px;
    }
    
    .member-photo {
        padding-bottom: 140%; /* Taller on mobile for better portrait view */
    }
    
    .member-social a {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* ============ Contact Page Additional Styling for White Background ============ */
#contact .form-check-label {
    color: var(--color-black);
    font-size: 14px;
}

#contact .form-note {
    color: var(--color-black-light);
    font-size: 12px;
    margin-top: 15px;
}

#contact h3 {
    color: var(--color-black);
    margin-bottom: 30px;
}

#contact .faq-item {
    margin-bottom: 30px;
}

#contact .faq-item h5 {
    color: var(--color-yellow-dark);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 16px;
}

#contact .faq-item p {
    color: var(--color-black-light);
    font-size: 14px;
    line-height: 1.6;
}

#contact .contact-social a {
    color: var(--color-black);
    margin-right: 15px;
    font-size: 18px;
    transition: color 0.3s ease;
}

#contact .contact-social a:hover {
    color: var(--color-yellow-dark);
}

#contact .map-container {
    background: var(--color-white-gray) !important;
    border: 1px solid rgba(244, 208, 63, 0.3);
}

#contact .map-container h4 {
    color: var(--color-black);
}

#contact .map-container p {
    color: var(--color-black-light);
}

#contact .map-container .fa {
    color: var(--color-yellow-dark);
}

#contact .message-box p {
    color: var(--color-black-light);
}

/* ========================================
   Creative Mix & Match Font Utilities
   ======================================== */

/* Title Font - Aoboshi One */
.font-title,
.creative-title,
h1.creative,
h2.creative,
.section-title.creative {
    font-family: 'Aoboshi One', serif !important;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.font-title-bold {
    font-family: 'Aoboshi One', serif !important;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Subtitle Font - Aoboshi One */
.font-subtitle,
.creative-subtitle,
h3.creative,
h4.creative,
.section-subtitle.creative {
    font-family: 'Aoboshi One', serif !important;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.font-subtitle-bold {
    font-family: 'Aoboshi One', serif !important;
    font-weight: 400;
}

/* Details Font - Aoboshi One */
.font-details,
.creative-details,
.project-meta,
.date-text,
.role-text,
.camera-info {
    font-family: 'Aoboshi One', serif !important;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.font-details-bold {
    font-family: 'Aoboshi One', serif !important;
    font-weight: 400;
}

/* Responsive font sizes for creative titles */
@media (max-width: 768px) {
    .font-title,
    .creative-title {
        font-size: 2rem;
    }
    
    .font-subtitle,
    .creative-subtitle {
        font-size: 1.2rem;
    }
    
    .font-details,
    .creative-details {
        font-size: 0.875rem;
    }
}

/* Example usage combinations */
.creative-card-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700;
}

.creative-card-subtitle {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-weight: 500;
}

.creative-card-meta {
    font-family: 'Space Mono', monospace !important;
    font-weight: 400;
    font-size: 0.875rem;
    color: #666;
}

/* ========================================
   Improved Portfolio 16:9 Layout
   ======================================== */

/* Portfolio Item - Responsive Height (Mobile First) */
.portfolio-item-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio for YouTube thumbnails */
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #000;
}

/* Mobile devices maintain 16:9 ratio */
@media only screen and (max-width: 767px) {
    .portfolio-item-wrapper {
        padding-bottom: 56.25% !important;
    }
}

@media only screen and (max-width: 575px) {
    .portfolio-item-wrapper {
        padding-bottom: 56.25% !important;
    }
}

@media only screen and (max-width: 479px) {
    .portfolio-item-wrapper {
        padding-bottom: 56.25% !important;
    }
}

.portfolio-item-wrapper:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 45px rgba(244, 208, 63, 0.35);
}

.portfolio-item-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item-wrapper:hover img {
    transform: scale(1.08);
}

/* Portfolio Overlay */
.portfolio-item-wrapper .portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.9) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
    padding: 20px 15px;
}

.portfolio-item-wrapper:hover .portfolio-overlay {
    opacity: 1;
}

/* Portfolio Info */
.portfolio-item-wrapper .portfolio-info {
    width: 100%;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item-wrapper:hover .portfolio-info {
    transform: translateY(0);
}

.portfolio-item-wrapper .portfolio-info h4 {
    color: #fff;
    font-size: 0.95rem;
    margin: 0 0 8px 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.portfolio-item-wrapper .portfolio-info .category-badge {
    display: inline-block;
    background: rgba(244, 208, 63, 0.9);
    color: #000;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Play Button Icon */
.portfolio-item-wrapper .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    background: rgba(244, 208, 63, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
    opacity: 0.75;
}

.portfolio-item-wrapper:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.2);
    background: rgba(244, 208, 63, 1);
    box-shadow: 0 0 35px rgba(244, 208, 63, 0.7);
}

.portfolio-item-wrapper .play-icon i {
    color: #000;
    font-size: 26px;
    margin-left: 4px;
}

/* Category Filter Active State */
.portfolio-filter ul li.sel-item {
    background: var(--color-yellow);
    color: #000;
    font-weight: 600;
}

/* Single Work Item Container */
.single-work-item {
    margin-bottom: 5px;
    padding-left: 2.5px;
    padding-right: 2.5px;
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
    /* Ensures the item moves smoothly to new positions for Isotope */
    -webkit-transition: transform 0.6s ease, opacity 0.6s ease;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Staggered Animation */
.single-work-item:nth-child(1) { animation-delay: 0.05s; }
.single-work-item:nth-child(2) { animation-delay: 0.1s; }
.single-work-item:nth-child(3) { animation-delay: 0.15s; }
.single-work-item:nth-child(4) { animation-delay: 0.2s; }
.single-work-item:nth-child(5) { animation-delay: 0.25s; }
.single-work-item:nth-child(6) { animation-delay: 0.3s; }
.single-work-item:nth-child(7) { animation-delay: 0.35s; }
.single-work-item:nth-child(8) { animation-delay: 0.4s; }
.single-work-item:nth-child(n+9) { animation-delay: 0.45s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
/* Large Tablet/Small Desktop (992px - 1199px) */
@media (max-width: 1199px) {
    .portfolio-item-wrapper {
        padding-bottom: 56.25% !important;
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .single-work-item {
        margin-bottom: 5px;
        padding-left: 2.5px;
        padding-right: 2.5px;
    }
    
    .portfolio-item-wrapper {
        padding-bottom: 56.25% !important; /* Maintain 16:9 ratio */
    }
    
    .portfolio-item-wrapper .portfolio-info h4 {
        font-size: 0.9rem;
    }
    
    .portfolio-item-wrapper .play-icon {
        width: 55px;
        height: 55px;
    }
    
    .portfolio-item-wrapper .play-icon i {
        font-size: 22px;
    }
}

/* Mobile Landscape & Small Tablet (576px - 767px) */
@media (max-width: 767px) {
    .portfolio-item-wrapper {
        border-radius: 0;
        padding-bottom: 140% !important; /* Even shorter on small tablets */
    }
    
    .single-work-item {
        margin-bottom: 5px;
        padding-left: 2.5px;
        padding-right: 2.5px;
    }
    
    .portfolio-item-wrapper .play-icon {
        width: 50px;
        height: 50px;
    }
    
    .portfolio-item-wrapper .play-icon i {
        font-size: 20px;
    }
    
    .portfolio-item-wrapper .portfolio-info h4 {
        font-size: 0.85rem;
    }
    
    .portfolio-item-wrapper .portfolio-info .category-badge {
        font-size: 0.6rem;
        padding: 2px 8px;
    }
    
    .portfolio-item-wrapper .portfolio-overlay {
        padding: 15px 12px;
    }
}

/* Mobile Portrait (320px - 575px) */
@media (max-width: 575px) {
    .single-work-item {
        margin-bottom: 5px;
        padding-left: 2.5px;
        padding-right: 2.5px;
    }
    
    .portfolio-item-wrapper {
        padding-bottom: 135% !important; /* Shorter for mobile screens */
    }
    
    .portfolio-item-wrapper .play-icon {
        width: 45px;
        height: 45px;
    }
    
    .portfolio-item-wrapper .play-icon i {
        font-size: 18px;
    }
    
    .portfolio-item-wrapper .portfolio-info h4 {
        font-size: 0.8rem;
        margin-bottom: 6px;
    }
    
    .portfolio-item-wrapper .portfolio-overlay {
        padding: 12px 10px;
    }
    
    .portfolio-item-wrapper .portfolio-info .category-badge {
        font-size: 0.58rem;
        padding: 2px 7px;
    }
}

/* Extra Small Mobile (320px - 479px) */
@media (max-width: 479px) {
    .portfolio-item-wrapper {
        padding-bottom: 130% !important; /* Even shorter for small phones */
    }
    
    .portfolio-item-wrapper .play-icon {
        width: 40px;
        height: 40px;
    }
    
    .portfolio-item-wrapper .play-icon i {
        font-size: 16px;
    }
    
    .portfolio-item-wrapper .portfolio-info h4 {
        font-size: 0.75rem;
        margin-bottom: 5px;
    }
    
    .portfolio-item-wrapper .portfolio-info .category-badge {
        font-size: 0.55rem;
        padding: 2px 6px;
    }
}

/* Magnific Popup YouTube iframe fixes */
.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px;
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    position: relative;
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000;
}

/* Custom Close Button (X) Styling */
.mfp-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 36px;
    opacity: 1;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    padding: 0;
    color: #fff;
    font-style: normal;
    font-weight: bold;
    font-family: Arial, sans-serif;
    background: rgba(244, 208, 63, 0.9);
    border: none;
    z-index: 1046;
    transition: all 0.3s ease;
}

.mfp-close:hover,
.mfp-close:focus {
    background: rgba(244, 208, 63, 1);
    color: #000;
    transform: rotate(90deg) scale(1.1);
    opacity: 1;
}

.mfp-close:active {
    top: 0;
}

/* Close button for iframe popup */
.mfp-iframe-holder .mfp-close {
    top: 0;
    right: 0;
    color: #000;
    background: rgba(244, 208, 63, 0.95);
    width: 50px;
    height: 50px;
    line-height: 46px;
    font-size: 40px;
    border-radius: 0;
}

.mfp-iframe-holder .mfp-close:hover {
    background: rgba(244, 208, 63, 1);
    color: #000;
    transform: rotate(90deg) scale(1.1);
}

/* Magnific Popup mobile adjustments */
@media screen and (max-width: 800px) and (orientation: landscape), 
       screen and (max-height: 300px) {
    .mfp-iframe-holder {
        padding-top: 0;
        padding-bottom: 0;
    }
    .mfp-iframe-holder .mfp-content {
        max-width: 100%;
    }
    
    .portfolio-item-wrapper .portfolio-overlay {
        padding: 10px 8px;
    }
    
    /* Close button adjustments for mobile */
    .mfp-close {
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 24px;
    }
    
    .mfp-iframe-holder .mfp-close {
        top: 0;
        right: 0;
    }
}

/* Additional mobile adjustments */
@media screen and (max-width: 768px) {
    .mfp-close {
        background: rgba(0, 0, 0, 0.9);
        width: 46px;
        height: 46px;
        line-height: 46px;
        font-size: 28px;
    }
    
    .mfp-iframe-holder .mfp-close {
        top: -46px;
        right: 0;
    }
}

/* ========================================
   Category Cards Styling (Our Work Categories Page)
   ======================================== */

/*============ Category Page Styles (Theme Matched) ============*/

#work-categories {
    background: var(--bg-secondary);
    position: relative;
    padding: 100px 0 !important;
}

#work-categories .section-heading {
    margin-bottom: 70px;
}

#work-categories h2 {
    font-family: 'Stevie Sans', sans-serif;
    color: var(--color-text-primary);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#work-categories h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: var(--color-yellow);
    margin: 20px auto 0;
}

#work-categories p.font-subtitle {
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 20px auto 0;
    line-height: 1.8;
}

.category-card {
    display: block;
    background: var(--color-white);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 30px;
    text-decoration: none;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    will-change: transform;
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border-color: transparent;
    text-decoration: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .category-card,
    .category-image img,
    .category-icon {
        transition: none !important;
    }
}

.category-image {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio for Video Thumbnails */
    overflow: hidden;
    background: var(--color-black);
}

.category-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    filter: brightness(0.85);
}

.category-card:hover .category-image img {
    transform: scale(1.08);
    filter: brightness(1);
}

.category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.5) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: all 0.4s ease;
}

.category-card:hover .category-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.category-icon {
    width: 70px;
    height: 70px;
    background: var(--color-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(20px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    opacity: 0;
}

.category-card:hover .category-icon {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.category-icon i {
    font-size: 32px;
    color: var(--color-black);
}

.category-info {
    padding: 30px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--color-white);
}

.category-info h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 15px 0;
    font-family: 'Stevie Sans', sans-serif;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-card:hover .category-info h3 {
    color: var(--color-yellow-dark);
}

.category-info p {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 25px 0;
    font-weight: 400;
}

.category-count {
    display: inline-block;
    background: var(--color-white-gray);
    color: var(--color-text-primary);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    align-self: center;
}

.category-card:hover .category-count {
    background: var(--color-yellow);
    color: var(--color-white);
    border-color: var(--color-yellow-dark);
}

/* Featured Category Card (All Projects) */
.category-card-featured {
    border: 2px solid var(--color-yellow);
    background: var(--color-white);
}

.category-card-featured .category-overlay {
    background: linear-gradient(
        to bottom,
        rgba(244, 208, 63, 0) 0%,
        rgba(244, 208, 63, 0.2) 40%,
        rgba(244, 208, 63, 0.5) 100%
    );
}

.category-card-featured:hover {
    box-shadow: 0 20px 50px rgba(244, 208, 63, 0.25);
    transform: translateY(-10px);
}

.category-card-featured .category-info h3 {
    color: var(--color-yellow-dark);
}

.category-card-featured .category-count {
    background: var(--color-yellow);
    color: var(--color-white);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #work-categories {
        padding: 60px 0 !important;
    }

    #work-categories h2 {
        font-size: 2rem;
    }

    .category-info {
        padding: 28px 22px;
    }

    .category-info h3 {
        font-size: 19px;
    }

    .category-icon {
        width: 60px;
        height: 60px;
    }

    .category-icon i {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .category-image {
        padding-bottom: 75%;
    }

    .category-info {
        padding: 25px 18px;
    }

    .category-info h3 {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .category-info p {
        font-size: 13px;
    }

    .category-icon {
        width: 55px;
        height: 55px;
    }

    .category-icon i {
        font-size: 24px;
    }
}

/*============ Responsive Styles for Our Story & Our Services ============*/

/* Tablet - Large (992px - 1199px) */
@media (max-width: 1199px) {
    /* Our Story Section */
    #about {
        min-height: 80vh !important;
        /* background-attachment: scroll; Better performance on smaller screens */
    }
    
    .about-intro-left {
        padding: 50px 30px !important;
    }
    
    .story-title {
        font-size: 3rem !important;
    }
    
    .story-desc {
        font-size: 1.05rem !important;
        line-height: 1.75 !important;
    }
    
    #about .about-intro-left h2 {
        font-size: 3rem !important;
    }
    
    #about .about-intro-left p {
        font-size: 1.05rem !important;
    }
    
    /* Services Section */
    .services-section {
        padding: 80px 0 !important;
    }
    
    .services-header {
        margin-bottom: 80px !important;
    }
    
    .services-title {
        font-size: 3rem !important;
    }
    
    .services-list {
        gap: 60px !important;
    }
    
    /* Keep zigzag layout on tablet large - Image left by default */
    .service-item {
        flex-direction: row !important;
    }
    
    /* Image right for reverse items */
  
    
    .service-item .img-wrapper {
        width: 58% !important;
        height: 320px !important;
    }
    
    /* Content on right side (for normal items with image left) */
    .service-item .content-wrapper {
        width: 44% !important;
        margin-left: -8% !important;
        margin-right: 0 !important;
        padding: 30px !important;
        border-left: 4px solid #fff !important;
        border-right: none !important;
        text-align: left !important;
    }
    
    /* Content on left side (for reverse items with image right) */
    .service-item.reverse .content-wrapper {
        width: 44% !important;
        margin-left: 0 !important;
        margin-right: -8% !important;
        border-right: 4px solid #fff !important;
        border-left: none !important;
        text-align: right !important;
    }
    
    /* Number position for normal items (image left) */
    .service-item .big-number {
        font-size: 100px !important;
        top: -30px !important;
        right: 20px !important;
        left: auto !important;
    }
    
    /* Number position for reverse items (image right) */
    .service-item.reverse .big-number {
        right: auto !important;
        left: 20px !important;
    }
    
    .service-item h3 {
        font-size: 1.6rem !important;
    }
    
    .service-item p {
        font-size: 0.9rem !important;
    }
}

/* Tablet - Medium (768px - 991px) */
@media (max-width: 991px) {
    /* Our Story Section */
    #about {
        padding: 60px 0 !important;
        min-height: auto !important;
        background-attachment: scroll !important; /* Better performance on tablet */
        margin-top: -30px !important;
    }
    
    .about-intro-left {
        padding: 40px 20px !important;
        max-width: 100% !important;
    }
    
    .text-mask-wrapper {
        margin-bottom: 20px;
    }
    
    .story-title {
        font-size: 2.5rem !important;
        margin-bottom: 25px !important;
        line-height: 1.2 !important;
    }
    
    .story-desc {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
        line-height: 1.7 !important;
    }
    
    #about .about-intro-left h2 {
        font-size: 2.5rem !important;
    }
    
    #about .about-intro-left p {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }
    
    /* Services Section */
    .services-section {
        padding: 60px 0 !important;
    }
    
    .services-header {
        margin-bottom: 60px !important;
    }
    
    .services-title {
        font-size: 2.5rem !important;
    }
    
    .services-list {
        gap: 50px !important;
    }
    
    /* Keep zigzag layout on tablet - maintain left/right alternating */
    .service-item {
        flex-direction: row !important;
    }
    
    
    .service-item .img-wrapper {
        width: 55% !important;
        height: 300px !important;
        margin: 0 !important;
    }
    
    /* Content on right (for normal items with image left) */
    .service-item .content-wrapper {
        width: 45% !important;
        margin-left: -8% !important;
        margin-right: 0 !important;
        padding: 30px !important;
        text-align: left !important;
        border-left: 4px solid #fff !important;
        border-right: none !important;
    }
    
    /* Content on left (for reverse items with image right) */
    .service-item.reverse .content-wrapper {
        width: 45% !important;
        margin-left: 0 !important;
        margin-right: -8% !important;
        padding: 30px !important;
        text-align: right !important;
        border-right: 4px solid #fff !important;
        border-left: none !important;
    }
    
    /* Number position for normal items */
    .service-item .big-number {
        font-size: 90px !important;
        top: -25px !important;
        right: 20px !important;
        left: auto !important;
    }
    
    /* Number position for reverse items */
    .service-item.reverse .big-number {
        right: auto !important;
        left: 20px !important;
    }
    
    .service-item h3 {
        font-size: 1.5rem !important;
    }
    
    .service-item p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }
}

/* Mobile - Large (576px - 767px) */
@media (max-width: 767px) {
    /* Our Story Section */
    #about {
        padding: 50px 0 !important;
        min-height: auto !important;
        background-attachment: scroll !important;
        margin-top: -20px !important;
        background-position: center center !important;
    }
    
    .about-intro-left {
        padding: 30px 15px !important;
        max-width: 100% !important;
    }
    
    .text-mask-wrapper {
        margin-bottom: 15px;
    }
    
    .story-title {
        font-size: 2rem !important;
        margin-bottom: 20px !important;
        line-height: 1.2 !important;
        text-align: center;
    }
    
    .story-desc {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
        text-align: justify;
    }
    
    #about .about-intro-left h2 {
        font-size: 2rem !important;
        text-align: center;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    }
    
    #about .about-intro-left p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    }
    
    #about .row {
        margin: 0;
    }
    
    #about .container {
        padding: 0 15px;
    }
    
    /* Services Section */
    .services-section {
        padding: 50px 0 !important;
    }
    
    .services-header {
        margin-bottom: 50px !important;
    }
    
    .services-header p {
        font-size: 0.8rem !important;
        letter-spacing: 3px !important;
    }
    
    .services-title {
        font-size: 2rem !important;
    }
    
    .services-list {
        gap: 40px !important;
    }
    
    /* Keep zigzag layout on mobile large */
    .service-item {
        flex-direction: row !important;
    }
    
    
    .service-item .img-wrapper {
        width: 50% !important;
        height: 250px !important;
    }
    
    /* Content on right (for normal items) */
    .service-item .content-wrapper {
        width: 50% !important;
        margin-left: -8% !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        padding: 25px !important;
        padding-bottom: 25px !important;
        border-left: 4px solid #fff !important;
        border-right: none !important;
        text-align: left !important;
    }
    
    /* Content on left (for reverse items) */
    .service-item.reverse .content-wrapper {
        width: 50% !important;
        margin-left: 0 !important;
        margin-right: -8% !important;
        border-right: 4px solid #fff !important;
        border-left: none !important;
        text-align: right !important;
    }
    
    /* Number position for normal items */
    .service-item .big-number {
        font-size: 70px !important;
        top: -20px !important;
        right: 15px !important;
        left: auto !important;
        -webkit-text-stroke: 1.5px var(--color-yellow) !important;
    }
    
    /* Number position for reverse items */
    .service-item.reverse .big-number {
        right: auto !important;
        left: 15px !important;
    }
    
    .service-item h3 {
        font-size: 1.3rem !important;
        margin-bottom: 0 !important;
    }
    
    /* Hide descriptions on tablet and below */
    .service-item p {
        display: none !important;
    }
}

/* Mobile - Small (320px - 575px) */
@media (max-width: 575px) {
    /* Our Story Section */
    #about {
        padding: 40px 0 !important;
        min-height: auto !important;
        background-attachment: scroll !important;
        margin-top: -20px !important;
        background-size: cover !important;
        background-position: center !important;
    }
    
    .about-intro-left {
        padding: 25px 10px !important;
        max-width: 100% !important;
    }
    
    .text-mask-wrapper {
        margin-bottom: 12px;
        text-align: center;
    }
    
    .story-title {
        font-size: 1.75rem !important;
        margin-bottom: 18px !important;
        line-height: 1.2 !important;
        text-align: center;
        word-break: break-word;
    }
    
    .story-desc {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
        text-align: justify;
        word-break: break-word;
    }
    
    #about .about-intro-left h2 {
        font-size: 1.75rem !important;
        text-align: center;
        margin-bottom: 18px !important;
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 1);
    }
    
    #about .about-intro-left p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
        margin-bottom: 15px !important;
    }
    
    #about .container {
        padding: 0 10px;
    }
    
    #about .row {
        margin: 0;
    }
    
    /* Services Section */
    .services-section {
        padding: 40px 0 !important;
    }
    
    .container-fluid {
        padding: 0 15px !important;
    }
    
    .services-header {
        margin-bottom: 40px !important;
    }
    
    .services-header p {
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 15px !important;
    }
    
    .services-title {
        font-size: 1.75rem !important;
    }
    
    .services-list {
        gap: 35px !important;
    }
    
    /* Keep zigzag layout on mobile small */
    .service-item {
        flex-direction: row !important;
    }
    
    
    .service-item .img-wrapper {
        width: 48% !important;
        height: 220px !important;
        border-radius: 2px !important;
    }
    
    /* Content on right (for normal items) */
    .service-item .content-wrapper {
        width: 52% !important;
        margin-left: -8% !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        padding: 20px !important;
        padding-bottom: 20px !important;
        border-left: 3px solid #fff !important;
        border-right: none !important;
        text-align: left !important;
    }
    
    /* Content on left (for reverse items) */
    .service-item.reverse .content-wrapper {
        width: 52% !important;
        margin-left: 0 !important;
        margin-right: -8% !important;
        border-right: 3px solid #fff !important;
        border-left: none !important;
        text-align: right !important;
    }
    
    /* Number position for normal items */
    .service-item .big-number {
        font-size: 60px !important;
        top: -15px !important;
        right: 10px !important;
        left: auto !important;
        -webkit-text-stroke: 1.5px var(--color-yellow) !important;
    }
    
    /* Number position for reverse items */
    .service-item.reverse .big-number {
        right: auto !important;
        left: 10px !important;
    }
    
    .service-item h3 {
        font-size: 1.15rem !important;
        margin-bottom: 0 !important;
    }
    
    /* Hide descriptions on mobile small */
    .service-item p {
        display: none !important;
    }
}

/* Extra Small Mobile (up to 400px) */
@media (max-width: 400px) {
    /* Our Story Section */
    #about {
        padding: 35px 0 !important;
        margin-top: -20px !important;
    }
    
    .about-intro-left {
        padding: 20px 8px !important;
    }
    
    .text-mask-wrapper {
        margin-bottom: 10px;
    }
    
    .story-title {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
        line-height: 1.2 !important;
    }
    
    .story-desc {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    
    #about .about-intro-left h2 {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
    }
    
    #about .about-intro-left p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    
    #about .container {
        padding: 0 8px;
    }
    
    /* Services Section */
    .services-title {
        font-size: 1.5rem !important;
    }
    
    .services-list {
        gap: 30px !important;
    }
    
    /* Keep zigzag layout on extra small */
    .service-item {
        flex-direction: row !important;
    }
    
    
    .service-item .img-wrapper {
        width: 45% !important;
        height: 200px !important;
    }
    
    /* Content on right (for normal items) */
    .service-item .content-wrapper {
        width: 55% !important;
        margin-left: -8% !important;
        margin-right: 0 !important;
        padding: 18px !important;
        padding-bottom: 18px !important;
        border-left: 3px solid #fff !important;
        border-right: none !important;
        text-align: left !important;
    }
    
    /* Content on left (for reverse items) */
    .service-item.reverse .content-wrapper {
        width: 55% !important;
        margin-left: 0 !important;
        margin-right: -8% !important;
        border-right: 3px solid #fff !important;
        border-left: none !important;
        text-align: right !important;
    }
    
    /* Number position for normal items */
    .service-item .big-number {
        font-size: 50px !important;
        top: -12px !important;
        right: 8px !important;
        left: auto !important;
    }
    
    /* Number position for reverse items */
    .service-item.reverse .big-number {
        right: auto !important;
        left: 8px !important;
    }
    
    .service-item h3 {
        font-size: 1.05rem !important;
        margin-bottom: 0 !important;
    }
    
    /* Hide descriptions on extra small */
    .service-item p {
        display: none !important;
    }
}

/* Landscape Orientation Optimizations */
@media (max-height: 500px) and (orientation: landscape) {
    #about {
        min-height: auto !important;
        padding: 30px 0 !important;
    }
    
    .about-intro-left {
        padding: 20px 15px !important;
    }
    
    .story-title {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
    }
    
    .story-desc {
        font-size: 0.9rem !important;
        margin-bottom: 12px !important;
    }
    
    /* Keep zigzag layout on landscape */
    .service-item {
        flex-direction: row !important;
    }
    
    .service-item.reverse {
        flex-direction: row-reverse !important;
    }
    
    .service-item .img-wrapper {
        width: 50% !important;
        height: 180px !important;
    }
    
    /* Content on right (for normal items) */
    .service-item .content-wrapper {
        width: 50% !important;
        margin-left: -8% !important;
        margin-right: 0 !important;
        padding: 15px !important;
        border-left: 3px solid #fff !important;
        border-right: none !important;
        text-align: left !important;
    }
    
    /* Content on left (for reverse items) */
    .service-item.reverse .content-wrapper {
        width: 50% !important;
        margin-left: 0 !important;
        margin-right: -8% !important;
        border-right: 3px solid #fff !important;
        border-left: none !important;
        text-align: right !important;
    }
    
    /* Number position for normal items */
    .service-item .big-number {
        font-size: 50px !important;
        top: -10px !important;
        right: 10px !important;
        left: auto !important;
    }
    
    /* Number position for reverse items */
    .service-item.reverse .big-number {
        right: auto !important;
        left: 10px !important;
    }
    
    .service-item h3 {
        font-size: 1rem !important;
    }
    
    .service-item p {
        display: none !important;
    }
}

/* High DPI / Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #about {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
                          url('https://res.cloudinary.com/dpbrfzz6c/image/upload/f_auto,q_auto,w_2400/v1768215316/CZD2-804_unk3sj.jpg');
    }
}