/* General Styles */
:root {
    --bg-dark: #0B1414;
    --bg-white: #FFFFFF;
    --bg-shape: #F5F5F5;
    --bg-primary: #0C5E5E;
    --bg-popular: #FFE138;
    --bg-popular-se: #0E7171;
    --text-primary-0: #0C5E5E;
    --text-primary: #EBFFFF;
    --text-dark: #0B1414;
    --text-dark-2: #707070;
    --accent-green-dot: #32D583;
    --hover-primary: #00F5F5;
    --card-yellow: #F3BE00;
    --card-blue: #3335C7;
    --card-orange: #EFB15B;
    --card-green: #33C749;
    --border-gray: #A6A6A6;
    --border-stroke: #E3E3E3;
    --border-stroke-p: #0E8C8C;
    --border-stroke-footer: #1D3535;
    --border-popular-se: #1F8C8C;
    --font-family-main: 'Inter', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-family-main);
    margin: 0;
    padding: 0;
}


.container {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 40px auto;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    position: relative;
    z-index: 1000;
}

.logo a {
    display: flex;
    align-items: center;
}

.header-content {
    display: none;
}

.mobile-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.mobile-nav-toggle .hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-primary);
}

.nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: var(--bg-dark);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    padding-top: 100px;
}

body.nav-open .nav {
    right: 0;
}

.nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 32px;
}

.nav-link {
    text-decoration: none;
    color: var(--text-primary);
    font-size: 20px;
}

.hero {
    text-align: center;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 20px;
}

.hero::before,
.hero::after {
    display: none;
}

.availability-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
}

.availability-badge::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('../icon/active.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.hero h1 {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.4;
    margin: 8px 0 0 0;
}

.hero p {
    font-size: 14px;
    line-height: 1.5;
    color: #C0C0C0;
    margin: 16px 0 0 0;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    width: 100%;
    max-width: 300px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px 9px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}

.btn-primary {
    background-color: var(--text-primary);
    color: var(--text-dark);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--text-primary);
}

.btn-primary:hover {
    background-color: var(--hover-primary);
}

.btn-secondary:hover {
    background-color: var(--text-primary);
    color: var(--text-primary-0);
    border: 1px solid var(--bg-dark);
}

.trusted-by {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

.trusted-by-text {
    font-size: 16px;
    font-weight: 700;
}

.avatar-group {
    display: flex;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--text-primary);
    box-sizing: border-box;
}

.avatar:hover {
    transform: scale(1.2);
    z-index: 10;
}

.avatar:not(:first-child) {
    margin-left: -12px;
}

.mainContainer {
    position: relative;
    overflow: hidden;
}

@media (max-width: 480px) {
    .hero::before {
        display: block;
        content: '';
        position: absolute;
        z-index: -1;
        width: 190px;
        height: 190px;
        background: #00ADAD;
        filter: blur(150px);
        border-radius: 572px;
        top: -118px;
        right: 40%;
        z-index: -5;
        /* overflow: hidden; */
    }

    .mainContainer::after {
        display: block;
        content: '';
        position: absolute;
        z-index: -1;
        width: 813.99px;
        height: 801.66px;
        background-image: url('../image/background/glass1.svg');
        background-size: contain;
        background-repeat: no-repeat;
        left: -70%;
        top: -416px;
        overflow: hidden;
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0 48px;
    }

    .hero h1 {
        font-size: 48px;
        max-width: 600px;
    }

    .hero::before {
        display: block;
        content: '';
        position: absolute;
        z-index: -1;
        width: 305px;
        height: 305px;
        background: #00ADAD;
        filter: blur(300px);
        border-radius: 572px;
        top: -189px;
        right: 40%;
        z-index: -5;
    }

    .hero::after {
        display: block;
        content: '';
        position: absolute;
        z-index: -1;
        width: 1300px;
        height: 1280px;
        background-image: url('../image/background/glass1.svg');
        background-size: contain;
        background-repeat: no-repeat;
        top: -666px;
        overflow: hidden;
    }

    .hero p {
        font-size: 18px;
        max-width: 500px;
    }

    .hero-actions {
        flex-direction: row;
        gap: 20px;
        max-width: none;
        justify-content: center;
    }

    .btn {
        width: auto;
    }

    .trusted-by {
        flex-direction: row;
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1440px;
        padding: 0 120px;
    }

    .mobile-nav-toggle {
        display: none;
    }

    .header-content {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .nav {
        position: static;
        width: auto;
        height: auto;
        background: linear-gradient(180deg, rgba(71, 255, 255, 0.01) 0%, rgba(11, 20, 20, 0.10) 77.96%);
        border-radius: 100px;
        padding: 0;
        box-shadow: none;
        transition: none;
    }

    .nav-list {
        flex-direction: row;
        padding: 12px 35px 12px 32px;
        gap: 32px;
    }

    .nav-link {
        font-size: 16px;
    }

    .nav-item.active .nav-link {
        position: relative;
        padding-left: 16px;
        color: var(--hover-primary);
    }

    .nav-item.active .nav-link::before {
        content: '';
        width: 7px;
        height: 7px;
        background-color: var(--hover-primary);
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 50%;
    }

    .header-cta {
        background: transparent;
        color: var(--text-primary);
        border: 1px solid var(--text-primary);
        padding: 10px 18px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }

    .header-cta:hover {
        background-color: var(--text-primary);
        color: var(--text-primary-0);
        border: 1px solid var(--bg-dark);
    }

    .hero {
        padding: 72px 0 60px 0;
    }

    .hero::before {
        display: block;
        content: '';
        position: absolute;
        z-index: -1;
        width: 572px;
        height: 572px;
        background: #00ADAD;
        filter: blur(300px);
        border-radius: 572px;
        top: -355px;
        right: 40%;
    }

    .hero::after {
        display: block;
        content: '';
        position: absolute;
        z-index: -1;
        width: 2438.99px;
        height: 2403.66px;
        background-image: url('../image/background/glass1.svg');
        background-size: contain;
        background-repeat: no-repeat;
        top: -1248px;
        overflow: hidden;
    }

    .hero h1 {
        font-size: 56px;
        max-width: 800px;
    }

    .hero p {
        max-width: 600px;
        margin-top: 24px;
    }
}





























/* --- General & Mobile-First Styles (< 768px) --- */

.serviceContainer {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

.services-grid {
    display: flex;
    flex-direction: column;
    /* Stack cards vertically on mobile */
    justify-content: left;
}

.service-card {
    position: relative;
    box-sizing: border-box;
    padding: 32px 22px;
    min-height: 500px;
    max-height: 540px;
    text-align: left;
    overflow: hidden;
    flex-direction: column;
    border-left: none;
}


.service-card h3 {
    font-size: 38px;
    font-weight: 700;
    margin: 0;
    color: var(--text-dark);
    position: relative;
    z-index: 1;
}

.card-content-placeholder {
    margin-top: auto;
    /* Pushes the image to the bottom */
    width: 100%;
    position: relative;
    z-index: 1;
}

.card-content-placeholder img {
    display: block;
    margin-top: 24px;
    object-fit: cover;
}

/* --- Card Variations & Effects --- */

/* Background Colors */
.card-yellow {
    background-color: var(--card-yellow);
}

.card-blue {
    background-color: var(--card-blue);
}

.card-orange {
    background-color: var(--card-orange);
}

.card-green {
    background-color: var(--card-green);
}

/* Text Color Overrides */
.card-blue h3,
.card-blue p {
    color: var(--text-primary);
}

/* Blur Effect Pseudo-element */
.service-card::before {
    content: '';
    position: absolute;
    width: 317px;
    height: 317px;
    border-radius: 50%;
    top: -30%;
    left: -30%;
    z-index: 0;
}

.card-yellow::before {
    background: #FFD64E;
    filter: blur(150px);
}

.card-blue::before {
    background: #9193FF;
    filter: blur(125px);
}

.card-orange::before {
    background: #DDFA00;
    filter: blur(125px);
}

.card-green::before {
    background: #B6F9C0;
    filter: blur(150px);
}


/* --- Tablet Styles (>= 768px) --- */
@media (max-width: 767px) {
    .service-card:not(:first-child) {
        border-top: 10px solid rgba(255, 255, 255, 0.40);
    }
}

@media (min-width: 768px) {
    .serviceContainer {
        margin-top: 60px;
    }

    .services-grid {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;

        /* Hide scrollbar */
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    /* Webkit (Chrome, Safari) scrollbar hide */
    .services-grid::-webkit-scrollbar {
        display: none;
    }

    .service-card {
        flex-shrink: 0;
        flex-basis: 40%;
        min-width: 320px;
        max-width: 360px;
        border-top: none;
    }

    .service-card:not(:first-child) {
        border-left: 10px solid rgba(255, 255, 255, 0.40);
    }
}


/* --- Desktop Styles (>= 1024px) --- */
@media (min-width: 1024px) {
    .services-grid {
        gap: 0;
    }

    .service-card {
        flex-basis: calc(25% - 7.5px);
        min-height: 540px;
    }

    /* Ensure border is consistent on desktop */
    .service-card:not(:first-child) {
        border-top: none;
        border-left: 10px solid rgba(255, 255, 255, 0.40);
    }
}
























/* --- Trusted Client Logo Section --- */
.trusted-by-section {
    padding-block: 24px;
    background-color: var(--bg-dark);
    overflow-x: clip;
}

.trusted-by-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 120px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.trusted-by-text p {
    margin: 0;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
}

.logo-carousel-wrapper {
    position: relative;
    overflow: hidden;
    flex-grow: 1;
    /* The problematic mask-image properties have been REMOVED */
}

/* 🎨 NEW: Fading effect using pseudo-elements for better browser support */
.logo-carousel-wrapper::before,
.logo-carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    /* Width of the fade effect */
    z-index: 2;
    pointer-events: none;
    /* Allows clicking through the fade */
}

.logo-carousel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-dark), transparent);
}

.logo-carousel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-dark), transparent);
}


.logo-carousel {
    display: flex;
    align-items: center;
    gap: 56px;
    animation: slide 40s linear infinite;
}

.logo-carousel-wrapper:hover .logo-carousel {
    animation-play-state: paused;
}

@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.logo-carousel img {
    max-height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

/* --- Responsive Adjustments --- */

@media (max-width: 1024px) {
    .trusted-by-container {
        padding: 0 40px;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .trusted-by-container {
        flex-direction: column;
        padding: 0 20px;
        gap: 24px;
    }

    .trusted-by-text p {
        text-align: center;
        white-space: normal;
        width: 100%;
    }

    .logo-carousel-wrapper::before,
    .logo-carousel-wrapper::after {
        width: 50px;
        /* Make the fade narrower on mobile */
    }

    .logo-carousel {
        gap: 40px;
        animation-duration: 30s;
    }

    .logo-carousel img {
        max-height: 37px;
    }
}

@media (max-width: 480px) {
    .trusted-by-text p {
        font-size: 12px;
    }

    .logo-carousel img {
        max-height: 26px;
    }
}






























/* ---------- My work show (Responsive) */

.mywork {
    max-width: 1440px;
    margin: 40px auto;
    position: relative;
    overflow: hidden;
    /* This is crucial to hide the overflowing content */
    padding: 40px 0;
}

.mywork .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 500px;
    /* Slightly smaller for better balance */
    width: 60%;
    /* Use percentage for responsiveness */
    height: auto;
    z-index: 1;
}

.animation-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.grid-row {
    display: flex;
    /* width is not needed, flexbox handles it */
}

.row-content {
    display: flex;
    flex-shrink: 0;
    gap: 24px;
}

.row-content img {
    width: 400px;
    /* Base width for large screens */
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
}

/* Key Change: Using percentages for the transform.
  Since we duplicated the content, the total width is 200%.
  Translating by -50% moves exactly one full set of images.
*/
@keyframes slide-rtl {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes slide-ltr {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.grid-row:nth-child(odd) .row-content {
    animation: slide-rtl 45s linear infinite;
}

.grid-row:nth-child(even) .row-content {
    animation: slide-ltr 45s linear infinite;
}

/* Media Query for mobile devices and smaller tablets */
@media (max-width: 768px) {

    .mywork {
        padding: 0;
    }

    .row-content img {
        width: 283px;
        /* Smaller images on smaller screens */
        height: auto;
    }

    .animation-container,
    .row-content {
        gap: 16px;
        /* Reduce the gap */
    }

    /* Optional: Slow down animation on mobile if desired */
    .grid-row .row-content {
        animation-duration: 60s;
    }
}

@media (max-width: 480px) {


    .row-content img {
        width: 164px;
        height: auto;
    }

    /* .animation-container,
    .row-content {
        gap: 16px;
    } */


}





























/* --- Section Styles --- */
.services-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px 120px;
    box-sizing: border-box;
    background-color: var(--bg-white);
}

.services-grid-2 {
    display: grid;
    gap: 20px;
    /* --- CHANGE: Set a fixed 3-column layout for desktop view --- */
    grid-template-columns: repeat(3, 1fr);
}

.service-card-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid var(--border-gray);
    border-radius: 24px;
    color: var(--text-dark);
    font-size: 32px;
    font-weight: 300;
    height: 154px;
    padding: 10px;
    /* transition: background-color 0.3s, border-color 0.3s; */
}

.service-card-2:hover {
    background-color: var(--bg-shape);
    border-color: var(--border-stroke-p);
}

.logo-card {
    border-color: transparent !important;
    background-color: transparent !important;
}

.logo-card img {
    height: 72px;
    width: auto;
}

/* --- Media Queries for Responsiveness --- */

/* Tablet View (maintains 3-column layout but reduces sizes) */
@media (max-width: 1024px) {
    .services-section {
        /* Reduce padding to give cards more space */
        padding: 80px 40px;
    }

    .service-card-2 {
        /* Reduce font size to prevent text wrapping */
        font-size: 24px;
        height: 130px;
    }
}


/* TAb View */
@media (max-width: 768px) {
    .services-section {
        /* Reduce padding further for mobile devices */
        padding: 60px 20px;
    }

    .services-grid-2 {
        /* --- CHANGE: Force a two-column layout --- */
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .service-card-2 {
        /* Make font and card height smaller for the 2-column layout */
        font-size: 18px;
        height: 79px;
        padding: 0;
    }

    .logo-card {
        /* --- CHANGE: Make the logo span the full width (2 columns) --- */
        /* grid-column: 1 / -1; */
    }

    .logo-card img {
        /* Slightly reduce logo size on mobile */
        height: 50px;
    }
}

/* TAb View */
@media (max-width: 480px) {
    .services-section {
        /* Reduce padding further for mobile devices */
        padding: 60px 20px;
    }

    .services-grid-2 {
        /* --- CHANGE: Force a two-column layout --- */
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .service-card-2 {
        /* Make font and card height smaller for the 2-column layout */
        font-size: 14px;
        height: 60px;
        padding: 0;
    }

    .logo-card {
        /* --- CHANGE: Make the logo span the full width (2 columns) --- */
        grid-column: 1 / -1;
    }

    .logo-card img {
        /* Slightly reduce logo size on mobile */
        height: 50px;
    }
}






























/* --- About Us Section --- */

.aboutus {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Use more flexible padding for smaller screens */
    padding: 50px 80px;
    box-sizing: border-box;
    background: var(--bg-primary);
}

.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: start;
    /* Vertically center items for better alignment */
    width: 100%;
    max-width: 1200px;
    /* Simplified max-width */
    gap: 64px;
}

.logo-container {
    flex-shrink: 0;
    /* Removed margin-top, as align-items: center on parent is better */
}

.logo {
    height: 70px;
    width: auto;
}

.text-content {
    color: var(--bg-white);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.5;
    /* Add a max-width to prevent lines from getting too long */
    max-width: 800px;
}

/* Added a clear gap between paragraphs for readability */
.text-content p+p {
    margin-top: 24px;
}

/* --- Responsive Adjustments --- */

/* For smaller desktops and large tablets (e.g., iPad Landscape) */
@media (max-width: 1024px) {
    .aboutus {
        /* Reduce padding on the sides */
        padding: 50px 40px;
    }

    .text-content p {
        margin-top: 0;
    }

    .content-wrapper {
        gap: 48px;
        /* Reduce the gap between logo and text */
    }

    .text-content {
        /* Reduce font size for better fit */
        font-size: 26px;
    }
}

/* For standard tablets (e.g., iPad Portrait) */
@media (max-width: 768px) {
    .content-wrapper {
        /* Stack logo and text vertically */
        flex-direction: column;
        gap: 32px;
        /* Adjust gap for vertical stacking */
    }

    .text-content {
        /* Center the text when stacked */
        text-align: start;
        font-size: 24px;
        /* Further reduce font size */
    }
}

@media (max-width: 480px) {
    .text-content {

        font-size: 16px;
    }
}





















/* --- Price Section --- */
.pricing-section {
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin: 0 auto;
    background: var(--bg-shape);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 50px 20px 80px;
    box-sizing: border-box;
}

.pricing-header {
    display: flex;
    width: 100%;
    max-width: 590px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pricing-title {
    color: var(--text-dark);
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    line-height: 120%;
    margin: 0;
}

.pricing-subtitle {
    color: var(--text-dark-2);
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
    max-width: 490px;
}

.toggle-buttons {
    display: flex;
    padding: 8px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    border-radius: 1000px;
    background: var(--bg-white);
    box-shadow: 0px 11px 11px 0px rgba(22, 29, 29, 0.09), 0px 3px 6px 0px rgba(22, 29, 29, 0.10);
}

.toggle-btn {
    display: flex;
    padding: 6px 26px;
    justify-content: center;
    align-items: center;
    border-radius: 1000px;
    border: none;
    cursor: pointer;
    background: transparent;
    /* Changed from bg-shape for better blending */
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
    white-space: nowrap;
    /* transition: all 0.3s ease; */
}

.toggle-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
}

.pricing-cards-container {
    width: 100%;
    max-width: 1201px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

.price-card {
    display: flex;
    width: 387px;
    padding: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    border: 2px solid transparent;
    border-radius: 20px;
    background: var(--bg-white);
    box-shadow: 0px 10px 10px 0px rgba(11, 20, 20, 0.09), 0px 3px 6px 0px rgba(11, 20, 20, 0.10);
    /* transition: border 0.3s ease; */
    flex-shrink: 0;
    /* Prevents cards from shrinking in flex container */
}

.price-card:hover {
    border: 2px solid var(--bg-primary);
}

.card-inner {
    display: flex;
    width: 100%;
    padding: 20px 16px 20px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    border-radius: 16px;
    border: 1px solid var(--border-stroke);
    background: var(--bg-shape);
    box-sizing: border-box;
}

.card-header {
    width: 100%;
}

.card-title {
    color: var(--text-dark);
    font-size: 32px;
    font-weight: 600;
    line-height: 120%;
    margin: 0;
}

.card-features {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 200px;
    /* Ensures consistent card height */
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-stroke);
}

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

.feature-icon {
    font-size: 20px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -webkit-mask-size: cover;
    mask-size: cover;
}



.feature-item.active .feature-icon {
    -webkit-mask-image: url('../icon/tick-p.svg');
    mask-image: url('../icon/tick-p.svg');
}

.feature-item.inactive .feature-icon {
    -webkit-mask-image: url('../icon/cancel-w.svg');
    mask-image: url('../icon/cancel-w.svg');
}

.feature-item.inactive .feature-icon {
    background-color: var(--text-dark-2);
}

.feature-item.active .feature-icon {
    background-color: var(--bg-primary);
}

.highlighted .feature-item.active .feature-icon {
    background-color: var(--text-primary);
}

.highlighted .feature-item.inactive .feature-icon {
    background-color: #a0aec0;
}


.feature-item:not(:last-child) {
    padding-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid var(--border-stroke);
    margin: 0;
}

.feature-item span {
    font-family: var(--font-family-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: var(--text-dark-2);
}

.feature-item.active span {
    color: var(--text-primary-0);
    font-weight: 600;
}

.card-footer {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    padding: 0 14px;
}

.card-price {
    color: var(--text-dark);
    font-size: 40px;
    font-weight: 600;
    line-height: 120%;
    margin: 0;
}

.card-button {
    display: inline-flex;
    width: 100%;
    padding: 11px 18px 9px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    background: var(--bg-primary);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: var(--bg-white);
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    /* transition: background-color 0.3s ease; */
}

.card-button:hover {
    background-color: var(--bg-dark);
}

/* --- Highlighted Card Overrides --- */
.price-card.highlighted {
    background: var(--bg-primary);
}

.price-card.highlighted:hover {
    border: 2px solid var(--bg-white);
}

.highlighted .card-inner {
    background: var(--bg-popular-se);
    border: 1px solid var(--border-stroke-p);
    padding-bottom: 20px;
}

.highlighted .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.highlighted .card-title {
    color: var(--text-primary);
}

.popular-tag {
    display: flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--bg-popular);
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 500;
}

.highlighted .feature-item.active .feature-icon {
    color: var(--text-primary);
}

.highlighted .feature-item.inactive .feature-icon {
    color: #a0aec0;
}

.highlighted .feature-item.active span {
    color: var(--text-primary);
}

.highlighted .feature-item.inactive span {
    color: #a0aec0;
}

.highlighted .feature-item {
    border-bottom-color: var(--border-stroke-p);
}

.highlighted .card-price {
    color: var(--text-primary);
}

.highlighted .card-button {
    background: var(--bg-white);
    color: var(--bg-primary);
}

.highlighted .card-button:hover {
    background-color: var(--bg-popular);
    color: var(--text-dark);
}

/* --- Responsive Styles --- */

/* Tablet View (1024px and below) - Horizontal Scrolling */
@media (max-width: 1024px) {
    .pricing-cards-container {
        justify-content: flex-start;
        /* Align cards to the left */
        overflow-x: auto;
        /* Enable horizontal scrolling */
        padding-bottom: 20px;
        /* Add space for shadow */
    }

    /* Hides the scrollbar */
    .pricing-cards-container::-webkit-scrollbar {
        display: none;
        /* For Chrome, Safari, and Opera */
    }

    .pricing-cards-container {
        -ms-overflow-style: none;
        /* For IE and Edge */
        scrollbar-width: none;
        /* For Firefox */
    }
}

/* Tablet View (768px and below) */
@media (max-width: 768px) {
    .pricing-title {
        font-size: 36px;
    }

    .toggle-buttons {
        padding: 6px;
    }

    .toggle-btn {
        padding: 6px 18px;
        font-size: 14px;
    }

    .price-card {
        width: 340px;
        /* Slightly smaller cards */
    }
}

/* Mobile View (480px and below) */
@media (max-width: 480px) {
    .pricing-section {
        padding: 40px 15px 60px;
    }

    .pricing-title {
        font-size: 28px;
    }

    .pricing-subtitle {
        font-size: 14px;
    }

    .toggle-buttons {
        width: 100%;
    }

    .toggle-btn {
        font-size: 12px;
        padding: 8px 10px;
        flex-grow: 1;
        /* Allow buttons to fill space */
    }

    .price-card {
        width: 288px;
    }

    .card-title {
        font-size: 32px;
    }

    .card-price {
        font-size: 36px;
    }

    .feature-item span {
        font-size: 14px;
    }
}
































.testimonial-section {
    width: 100%;
    background: var(--bg-white);
    display: flex;
    justify-content: center;
    padding: 60px 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    margin-top: -2px;
    margin-bottom: -2px;
}

.testimonial-section::after {
    content: '';
    position: absolute;
    width: 100%;
    width: 1110px;
    height: 1152px;
    background-image: url('../image/background/testimonial_bg.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.testimonial-container {
    max-width: 931px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    z-index: 1;
}

.testimonial-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.testimonial-header h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: 40px;
    font-weight: 600;
}

.testimonial-header p {
    margin: 0;
    color: var(--text-dark-2);
    font-size: 18px;
    max-width: 450px;
}

.testimonial-slider-wrapper {
    width: 100%;
    position: relative;
}

.testimonial-slider-viewport {
    width: 100%;
    overflow: hidden;
}

.testimonial-slider-track {
    display: flex;
}

.testimonial-slide {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 24px 15px 15px 15px;
}

.quote-text {
    position: relative;
    margin: 0 0 40px 0;
    padding: 0 68px;
    color: var(--text-dark);
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.5;
}

.quote-text::before,
.quote-text::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('../icon/quote.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}

.quote-text::before {
    top: -30px;
    left: 0px;
    transform: rotate(180deg);
}

.quote-text::after {
    content: '”';
    bottom: -50px;
    right: 0px;
}

.client-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.client-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.client-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.client-name {
    margin: 0;
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 700;
}

.client-title {
    margin: 0;
    color: var(--text-dark-2);
    font-size: 14px;
    font-weight: 500;
}

.slider-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 40%;
    left: 50%;
    padding: 0 10px;
    box-sizing: border-box;
    pointer-events: none;
}

.nav-button {
    pointer-events: all;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-button:hover {
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1024px) {
    .testimonial-header h2 {
        font-size: 36px;
    }

    .quote-text {
        font-size: 22px;
        padding: 0 56px;
    }
}

@media (max-width: 768px) {
    .testimonial-section {
        padding: 40px 15px;
    }

    .testimonial-container {
        gap: 40px;
    }

    .testimonial-header h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    .testimonial-header p {
        font-size: 16px;
    }

    .quote-text {
        font-size: 18px;
        padding: 0;
    }

    .quote-text::before,
    .quote-text::after {
        display: none;
    }

    .client-avatar {
        width: 60px;
        height: 60px;
    }

    .nav-button {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .slider-nav {
        top: 30%;
    }
}










































/* --- FAQ Section Structure --- */
.faq-section {
    /* Changed fixed width to 100% to allow it to be flexible */
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: var(--bg-white);
    display: flex;
    justify-content: center;
    /* Added horizontal padding for smaller screens */
    padding: 50px 40px;
    box-sizing: border-box;
    /* Ensures padding is included in the width */
}

.faq-container {
    display: flex;
    /* Use max-width to control the maximum size, but allow shrinking */
    width: 100%;
    max-width: 1200px;
    flex-direction: column;
    align-items: center;
    gap: 61px;
}

.faq-header {
    display: flex;
    /* Use max-width instead of fixed width */
    width: 100%;
    max-width: 590px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.faq-header h2 {
    color: var(--text-dark);
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    line-height: 120%;
    margin: 0;
}

.faq-header p {
    color: var(--text-dark-2);
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}

.faq-content-wrapper {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 24px;
}

.faq-accordion {
    /* Flex-grow allows the accordion to take up available space */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Set a basis for width distribution */
    flex-basis: 65%;
}

.faq-item {
    border-bottom: 1px solid var(--border-stroke);
    padding-bottom: 16px;
}

.faq-question {
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: var(--text-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::after {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    /* In a real project, use a correct relative path or an SVG data URI */
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke="%230C5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease-in-out;
}

.faq-item[open] .faq-question::after {
    transform: rotate(180deg);
}

.faq-answer {
    color: var(--text-dark-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    padding: 16px 24px 0px 0;
    margin: 0;
}

/* --- Right Side: CTA Card --- */
.faq-cta-card {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    /* Adjusted sticky position */
    width: 100%;
    max-width: 384px;
    height: 286px;
    flex-shrink: 0;
    border-radius: 20px;
    background: var(--bg-primary);
    box-shadow: 0px 50px 14px 0px rgba(21, 35, 35, 0.00), 0px 32px 13px 0px rgba(21, 35, 35, 0.01), 0px 18px 11px 0px rgba(21, 35, 35, 0.05), 0px 8px 8px 0px rgba(21, 35, 35, 0.09), 0px 2px 4px 0px rgba(21, 35, 35, 0.10);
}

.cta-inner-card {
    display: flex;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    margin: 16px;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    border: 1px solid var(--border-popular-se);
    background: var(--bg-popular-se);
}

.cta-content {
    display: flex;
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.cta-text-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-cta-card h3 {
    color: var(--text-primary);
    font-size: 30px;
    font-weight: 700;
    line-height: 130%;
    margin: 0;
}

.faq-cta-card p {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    padding: 11px 18px 9px;
    justify-content: center;
    gap: 8px;
    align-self: stretch;
    border: none;
    border-radius: 100px;
    background: var(--bg-white);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: var(--text-primary-0);
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

.cta-button:hover {
    /* transform: translateY(-2px); */
    box-shadow: 0px 4px 8px 0px rgba(16, 24, 40, 0.1);
}

/* ======================================= */
/* --- Responsive Adjustments --- */
/* ======================================= */

/* --- Tablet View (for screens 1024px and below) --- */
@media (max-width: 1024px) {

    /* .faq-section{
        padding: 0 40px 0 0;
    } */
    .faq-container {
        gap: 40px;
        /* Reduce the gap */
    }

    .faq-cta-card {
        width: 335px;
        /* height: auto; */
    }

    .faq-content-wrapper {
        gap: 20px;
        /* Reduce gap between accordion and card */
    }

    .faq-header h2 {
        font-size: 36px;
        /* Slightly smaller heading */
    }

    .faq-cta-card h3 {
        font-size: 26px;
        /* Smaller heading in CTA card */
    }

    .cta-button {
        margin-top: 32px;
    }
}

/* --- Mobile View (for screens 768px and below) --- */
@media (max-width: 768px) {
    .faq-section {
        padding: 40px 16px;
    }

    .faq-header h2 {
        font-size: 28px;
    }

    .faq-header p {
        font-size: 14px;
    }

    .faq-content-wrapper {
        /* This is the key change: stack the items vertically */
        flex-direction: column;
        align-items: center;
        /* Center the items */
        gap: 30px;
    }

    .faq-accordion {
        width: 100%;
        flex-basis: auto;
        /* Reset flex-basis */
    }

    .faq-cta-card {
        /* Un-stick the card on mobile, as it now flows naturally */
        position: static;
        width: 100%;
        /* Allow card to take full width */
        height: auto;
        /* Auto height */
        padding: 16px;
        box-sizing: border-box;
    }

    .cta-inner-card {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 8px 0 8px 0;
        gap: 24px;
    }

    .cta-inner-card .cta-button {
        width: 90%;
        margin: 40px auto 0;

    }

}




























/* ==================== CTA Section ==================== */
.cta-section {
    background: var(--bg-dark);
    padding: 48px 0;
    /* ADDED padding for spacing */
    position: relative;
    overflow: hidden;
    display: flex;
    /* ADDED for centering */
    justify-content: center;
    /* ADDED for centering */
}

.cta-image-container{
    width: 100%;
    height: auto;

}
.ownerImage {
    width: 100%;
    height: auto;
    object-fit: cover; /* This now works correctly on the <img> tag */
}



.cta-section::before {
    content: '';
    position: absolute;
    width: 100%;
    /* CHANGED from 1440px */
    max-width: 1440px;
    /* ADDED for large screens */
    height: 1152px;
    background-image: url('../image/logo.avif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.main-content-wrapper {
    position: relative;
    display: flex;
    width: 1200px;
    flex-direction: column;
    align-items: center;
    gap: 100px;
    z-index: 2;

}


/* --- CTA Top --- */
.cta-top-content {
    display: flex;
    width: 100%;
    /* CHANGED */
    max-width: 640px;
    /* ADDED */
    flex-direction: column;
    align-items: center;
    gap: 12px;
}









.cta-button {
    display: inline-flex;
    padding: 10px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 100px;
    background: var(--text-primary);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--text-dark);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    width: 119px;
    margin: 0 auto;
}

.cta-button:hover {
    background-color: var(--hover-primary);
}









/* ==================== Footer Section ==================== */
.footer-section {
    position: relative;
    overflow: hidden;
    padding: 0 0 26px 0;
    display: flex;
    /* ADDED */
    justify-content: center;
    /* ADDED */
}

.footer-lines {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 786px;
    z-index: 0;
    pointer-events: none;
    width: 1440px;
    display: flex;
    justify-content: space-between;
}

.footer-lines .vertical-line:not(:first-child):not(:last-child) {
    width: 1px;
    height: 786px;
    background: linear-gradient(180deg, rgba(227, 227, 227, 0.10) 0%, rgba(227, 227, 227, 0.10) 50%, rgba(227, 227, 227, 0.00) 100%);
}

.footer-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.footer-top {
    display: flex;
    width: 100%;
    /* CHANGED */
    max-width: 382px;
    /* ADDED */
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

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

.footer-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    /* CHANGED */
    justify-content: center;
    flex-wrap: wrap;
    /* ADDED to wrap on small screens */
}

.footer-nav a {
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--hover-primary);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding-top: 24px;
    border-top: 1px solid var(--border-stroke-footer);
}

.copyright-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 120%;
    margin: 0;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-links a .icon {
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--bg-white);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    /* transition: background-color 0.3s ease; */
    /* ADDED smooth transition */
}

.social-links a.facebook .icon {
    mask-image: url('../icon/social/facebook.svg');
    -webkit-mask-image: url('../icon/social/facebook.svg');
}

.social-links a.linkedin .icon {
    mask-image: url('../icon/social/linkedin.svg');
    -webkit-mask-image: url('../icon/social/linkedin.svg');
}

.social-links a.dribbble .icon {
    mask-image: url('../icon/social/dribbble.svg');
    -webkit-mask-image: url('../icon/social/dribbble.svg');
}

.social-links a.behance .icon {
    mask-image: url('../icon/social/behance.svg');
    -webkit-mask-image: url('../icon/social/behance.svg');
}

.social-links a:hover .icon {
    background-color: var(--hover-primary);
}


/* ======================================================= */
/* =============== MEDIA QUERIES (RESPONSIVE) ============ */
/* ======================================================= */

/* --- Tablet (e.g., iPad Pro, Laptops) --- */
@media (max-width: 1024px) {
    .main-content-wrapper {
        max-width: 960px;
    }

}

/* --- Tablet (e.g., iPad Air) --- */
@media (max-width: 768px) {
    .main-content-wrapper {
        max-width: 720px;
        padding: 0 15px;
    }



    .copyright-text {
        font-size: 16px;
    }
}


/* --- Mobile (e.g., iPhone) --- */
@media (max-width: 600px) {
    .cta-top-content {
        gap: 32px;
    }


    .footer-nav {
        gap: 16px 24px;
        /* Adjust gap for wrapped items */
    }

    .footer-nav a {
        font-size: 12px;
    }

    .social-links {
        width: 100%;
        margin: 0 auto;
        justify-content: center;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--border-stroke-footer);
    }

    /* === YOUR REQUIREMENT: Social icons above copyright text === */
    .footer-bottom {
        flex-direction: column-reverse;
        /* This moves the second item (social links) to the top */
        gap: 16px;
        /* Add space between the two items */
        text-align: center;
        border-top: none;
        padding-top: 0;
        /* border-bottom: 1px solid var(--border-stroke-footer); */
    }

    .copyright-text {
        font-size: 14px;
    }
}