*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body
{
    font-family: 'Inter', system-ui, sans-serif;

}

.navbar 
{
    display: flex;
    justify-content: space-between;
    background:#ffc0e2;
    background-attachment: fixed;
    position: relative;
    z-index: 10;
}

.navbar-logo {
    font-size: 1.7rem;
    font-weight: 700;
    color: #b777b3;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-right: 30px; 
}
.navbar-container {
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    padding: 15px 0px;
    padding-left: 2rem;
    padding-bottom: 40px;
    align-items: baseline;
    margin-left: 40px

}

.navbar-logo:hover {
    transform: scale(1.05);
}


.navbar-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    margin-right: 2rem;
}

.navbar-menu li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.navbar-menu li a:hover {
    color: #f0abf0;
}

/* Navigation CTA Button */
.navbar-cta-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 16px 32px !important;
    background: linear-gradient(135deg, #d9034b 0%, #f06292 100%) !important;
    color: white !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(217, 3, 75, 0.3) !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.3s ease !important;
    margin-left: 41rem;
    white-space: nowrap !important;
    position: relative !important;
}

.navbar-cta-button:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(217, 3, 75, 0.4) !important;
    color: white !important;
}


/* Hero Section */
.hero {
    min-height: 130vh; /* Increased from 100vh to 120vh */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left; /* Changed from center to left */
    padding: 0rem 2rem; 
    padding-left: 5rem; 
    position: relative;
    overflow: hidden;
    /* Beautiful pink gradient background */
    background: linear-gradient(180deg, #ffc0e2 0%, #ffc0e2 50%, #ffffff 100%);
    background-attachment: fixed;
}

.hero-background-video {
    position: absolute;
    top: 0px; 
    left: 520px;
    width: 58%;
    height: 67%;
    object-fit: cover; /* Changed from contain to cover */
    z-index: 1; /* Changed from -2 to 1 to appear above gradient */
    opacity: 1;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
    /* Add shadow for depth */
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 10px 20px rgba(0, 0, 0, 0.1),
        0 5px 10px rgba(0, 0, 0, 0.08);
    /* Responsive video behavior */
    transition: all 0.3s ease;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Changed from 1 to 2 to appear above video */
}

.hero-title {
    font-size: 6rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #d9034b 0%, #f06292 100%);
    z-index: 1; /* Ensure text is above highlight */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    position: relative; 
    animation: fadeInUp 1s ease;
    margin-top: 18rem; /* Add margin to the top */
}


.hero-description{
    font-family: SF Pro Display, sans-serif;
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 2rem;
    max-width: 600px;
    line-height: 1.6;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.hero-title:hover {
    transform: scale(1.02);
    transition: all 0.3s ease;
}
.hero-button-mac {
    padding-left: 300px;
    display: inline-flex; /* Change from flex to inline-flex */
    align-items: center; /* Remove flex-wrap and justify-content */
    gap: 0.5rem;
    padding: 16px 32px;
    background: linear-gradient(135deg, #d9034b 0%, #f06292 100%);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(217, 3, 75, 0.3);
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    position: relative; /* Add this for JavaScript animations */
    transition: all 0.3s ease;
}

/* Animation Classes */
.hero-button-mac.animate {
    animation: slideUpBounce 0.8s ease-out forwards;
}

.hero-button-mac.animate-glow {
    animation: slideUpBounce 0.8s ease-out forwards, pulseGlow 4s ease-in-out 0.8s infinite;
}


.hero-button-windows {
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 16px 32px;
    background: transparent;
    color: #d4547e;
    border: 2px solid #d87091;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: none;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    position: relative;
    transition: all 0.3s ease;
}

/* Animation Classes for Windows Button */
.hero-button-windows.animate {
    animation: scaleIn 0.8s ease-out 0.2s forwards;
}

.hero-button-windows.animate-border {
    animation: scaleIn 0.8s ease-out 0.2s forwards;
}

.hero-button-windows.animate-border::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, hsl(340, 84%, 75%), #e9b2c4, #fd80a8);
    border-radius: 14px;
    z-index: -1;
    opacity: 0;
    animation: borderGlow 4s ease-in-out 0.8s infinite;
}

@keyframes borderGlow {
    0%, 25%, 75%, 100% { 
        opacity: 0; 
    }
    50% { 
        opacity: 0.8; 
    }
}

/* Button container */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 14rem;
    justify-content: center;
}

/* Features Section */
.features {
    padding: 5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.follow-ups, .hotkeys {
    font-size: 3rem;
    font-weight: 700;
    color: #d9034b;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #d9034b 0%, #f06292 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.follow-ups-description, .hotkeys-description {
    font-size: 1.25rem;
    color: #666;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Hotkeys Demo - Cluely Style */
.hotkeys-demo {
    margin: 4rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 320px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f2ff 100%);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    /* Responsive adjustments */
    width: 100%;
    max-width: 1200px;
}

.hotkeys-demo::before {
    content: 'design analysis metrics creativity insights data visualization trends patterns efficiency productivity collaboration workflow optimization tools resources strategic thinking innovation solutions methodology research development implementation quality performance measurement evaluation success metrics analytics dashboard reporting insights trends patterns design thinking user experience interface aesthetics functionality usability accessibility responsive mobile desktop web applications software development coding programming languages frameworks libraries tools debugging testing deployment maintenance updates security performance scalability reliability maintenance';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: rgba(102, 126, 234, 0.08);
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.8;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    padding: 2rem;
    transform: rotate(-5deg);
    filter: blur(1px);
}

.keys-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.keys-row {
    display: flex;
    justify-content: center;
    gap: 9rem;
    align-items: center;
    flex-wrap: wrap;
}

.hotkey-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #666;
    text-align: center;
}

.key-combination {
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    animation: float 3s ease-in-out infinite;
}

.key {
    background: white;
    border: 3px solid #e9ecef;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    font-size: 2.5rem;
    font-weight: 600;
    color: #333;
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    min-width: 80px;
    text-align: center;
    position: relative;
}

.key:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.key:active {
    transform: translateY(2px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.plus {
    font-size: 2rem;
    color: #666;
    font-weight: 300;
}

.hotkey-label
{
    font-size: 1.2rem;
    color: #666;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-align: center;
}

.keys-container{
    flex-direction: column;
    display: flex;
    align-items: center;

}

.promotional-quote {
    font-size: 4rem;
    font-weight: 600;
    color: #d9034b;
    text-align: center;
    margin-top: 3rem;
    background: linear-gradient(135deg, #d9034b 0%, #f06292 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Footer - Cluely Style */
.footer {
    background: #e6a6b2;
    color: #fff;
    padding: 4rem 2rem 2rem;
    margin-top: 6rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 3rem;
}

.footer-brand {
    flex: 1;
    min-width: 300px;
}

.footer-logo {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #d9034b 0%, #f06292 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


.footer-links {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    margin-top: 20px;
}

.footer-column {
    min-width: 150px;
}

.footer-column h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 0.75rem;
}

.footer-column ul li a {
    color: #700404;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-column ul li a:hover {
    color: #f06292;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid #333;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copyright {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.footer-social {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.social-link {
    color: #666;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-link:hover {
    color: #f06292;
    background: rgba(246, 183, 204, 0.1);
}

.social-link svg {
    width: 20px;
    height: 20px;
}

.followup-video {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 20px;
    margin: 3rem auto;
    display: block;
    object-fit: cover;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 10px 20px rgba(0, 0, 0, 0.1),
        0 5px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background: transparent;
    position: relative;
    z-index: 1;
}

.followup-video:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.2),
        0 15px 25px rgba(0, 0, 0, 0.15),
        0 8px 15px rgba(0, 0, 0, 0.1);
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer {
        padding: 3rem 1rem 2rem;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 2rem;
    }
    
    .footer-brand {
        min-width: auto;
    }
    
    .footer-links {
        gap: 2rem;
    }
    
    .footer-column {
        min-width: 120px;
    }
    
    .footer-badges {
        gap: 0.5rem;
    }
    
    .badge {
        padding: 0.4rem 0.8rem;
        font-size: 0.7rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .footer-links {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .footer-badges {
        justify-content: center;
    }
}

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

/* Responsive Design - Comprehensive Mobile Support */

/* Large screens (1200px and up) - Default styles already applied */

/* Medium-Large screens (992px to 1199px) */
@media (max-width: 1199px) {
    .navbar-container {
        max-width: 100%;
        margin-left: 20px;
        padding-left: 1rem;
    }
    
    .navbar-cta-button {
        margin-left: 20rem !important;
    }
    
    .hero {
        padding-left: 3rem;
    }
    
    .hero-background-video {
        left: 420px;
        width: 60%;
        height: 65%;
    }
    
    .hero-title {
        font-size: 5rem;
        margin-top: 15rem;
    }
    
    .hero-button-mac {
        padding-left: 200px;
    }
    
    .hero-buttons {
        padding-top: 12rem;
    }
}

/* Medium screens (768px to 991px) */
@media (max-width: 991px) {
    .navbar-container {
        margin-left: 10px;
        padding-left: 1rem;
        padding-right: 1rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .navbar-menu {
        flex-wrap: wrap;
        gap: 1rem;
        margin-right: 1rem;
    }
    
    .navbar-cta-button {
        margin-left: 5rem !important;
        padding: 12px 24px !important;
        font-size: 1rem !important;
    }
    
    .hero {
        min-height: 120vh;
        padding: 0rem 1rem;
        padding-left: 2rem;
        flex-direction: column;
    }
    
    .hero-background-video {
        position: relative;
        left: 0;
        top: 2rem;
        width: 90%;
        height: 300px;
        margin: 0 auto;
        align-self: center;
    }
    
    .hero-content {
        order: 1;
        text-align: center;
    }
    
    .hero-title {
        font-size: 4rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    
    .hero-description {
        font-size: 1.3rem;
        max-width: 90%;
        margin: 0 auto 2rem auto;
    }
    
    .hero-button-mac {
        padding-left: 0;
    }
    
    .hero-buttons {
        padding-top: 2rem;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .hero-button-mac,
    .hero-button-windows {
        width: 250px;
        justify-content: center;
    }
    
    .followup-video {
        max-width: 95%;
        margin: 2.5rem auto;
        border-radius: 15px;
    }
}

/* Small-Medium screens (576px to 767px) */
@media (max-width: 767px) {
    .navbar {
        padding: 0.5rem 0;
    }
    
    .navbar-container {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 0;
        padding: 1rem;
        text-align: center;
    }
    
    .navbar-logo {
        font-size: 1.5rem;
        margin: 0;
    }
    
    .navbar-menu {
        flex-direction: column;
        gap: 0.5rem;
        margin: 0;
        width: 100%;
        justify-content: center;
    }
    
    .navbar-menu li a {
        font-size: 0.9rem;
        padding: 0.5rem;
    }
    
    .navbar-cta-button {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
        width: auto;
    }
    
    .hero {
        min-height: 100vh;
        padding: 1rem;
        text-align: center;
    }
    
    .hero-background-video {
        width: 95%;
        height: 250px;
        top: 1rem;
        border-radius: 15px;
    }
    
    .hero-title {
        font-size: 3rem;
        margin-top: 1rem;
        line-height: 1.2;
    }
    
    .hero-description {
        font-size: 1.1rem;
        max-width: 95%;
        margin: 0 auto 1.5rem auto;
    }
    
    .hero-buttons {
        padding-top: 1rem;
        gap: 0.8rem;
    }
    
    .hero-button-mac,
    .hero-button-windows {
        width: 100%;
        max-width: 280px;
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    .follow-ups, .hotkeys {
        font-size: 2.5rem;
    }
    
    .follow-ups-description, .hotkeys-description {
        font-size: 1.1rem;
        max-width: 95%;
    }
    
    .followup-video {
        max-width: 98%;
        margin: 2rem auto;
        border-radius: 12px;
    }
    
    .keys-row {
        gap: 3rem;
        flex-wrap: wrap;
    }
    
    .promotional-quote {
        font-size: 2.5rem;
        padding: 0 1rem;
    }
}

/* Small screens (480px to 575px) */
@media (max-width: 575px) {
    .navbar-container {
        padding: 0.5rem;
    }
    
    .navbar-logo {
        font-size: 1.3rem;
    }
    
    .navbar-menu li a {
        font-size: 0.8rem;
    }
    
    .navbar-cta-button {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
    }
    
    .hero {
        padding: 0.5rem;
    }
    
    .hero-background-video {
        width: 98%;
        height: 200px;
        border-radius: 12px;
    }
    
    .hero-title {
        font-size: 2.5rem;
        margin-top: 0.5rem;
    }
    
    .hero-description {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .hero-button-mac,
    .hero-button-windows {
        width: 100%;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    .features {
        padding: 3rem 1rem;
    }
    
    .follow-ups, .hotkeys {
        font-size: 2rem;
    }
    
    .follow-ups-description, .hotkeys-description {
        font-size: 1rem;
    }
    
    .followup-video {
        max-width: 100%;
        margin: 1.5rem auto;
        border-radius: 10px;
    }
    
    .keys-row {
        gap: 2rem;
        flex-direction: column;
        align-items: center;
    }
    
    .key {
        min-width: 60px;
        padding: 1rem 1.5rem;
        font-size: 2rem;
    }
    
    .promotional-quote {
        font-size: 2rem;
        line-height: 1.2;
    }
}

/* Extra small screens (below 480px) */
@media (max-width: 479px) {
    .navbar-logo {
        font-size: 1.2rem;
    }
    
    .navbar-menu {
        gap: 0.3rem;
    }
    
    .navbar-menu li a {
        font-size: 0.7rem;
        padding: 0.3rem;
    }
    
    .navbar-cta-button {
        padding: 6px 12px !important;
        font-size: 0.7rem !important;
    }
    
    .hero-title {
        font-size: 2rem;
        margin-top: 0.5rem;
    }
    
    .hero-description {
        font-size: 0.9rem;
    }
    
    .hero-button-mac,
    .hero-button-windows {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
    
    .follow-ups, .hotkeys {
        font-size: 1.8rem;
    }
    
    .follow-ups-description, .hotkeys-description {
        font-size: 0.9rem;
    }
    
    .followup-video {
        max-width: 100%;
        margin: 1rem auto;
        border-radius: 8px;
    }
    
    .key {
        min-width: 50px;
        padding: 0.8rem 1.2rem;
        font-size: 1.8rem;
    }
    
    .promotional-quote {
        font-size: 1.5rem;
    }
    
    .hotkeys-demo {
        min-height: 250px;
        margin: 2rem 0.5rem;
    }
    
    /* Adjust button animations for small screens */
    .hero-button-mac.animate-glow,
    .hero-button-windows.animate-border {
        animation-duration: 3s; /* Slightly faster on mobile */
    }
    
    /* Ensure proper scaling of all elements */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden;
    }
}

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

/* Button Animation Keyframes */
@keyframes slideUpBounce {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGlow {
    0%, 50%, 100% {
        box-shadow: 0 4px 15px rgba(217, 3, 75, 0.3);
        transform: scale(1);
    }
    25% {
        box-shadow: 
            0 4px 30px rgba(217, 3, 75, 1),
            0 8px 40px rgba(238, 162, 188, 0.8),
            0 12px 50px rgba(232, 187, 202, 0.6),
            0 0 20px rgba(252, 165, 194, 0.9);
        transform: scale(1.05);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* FAQ Section Styles */
.faq {
    padding: 5rem 2rem;
    background: #fff;
}

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

.faq-title {
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
    color: #333;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-item:hover {
    border-color: #f06292;
    box-shadow: 0 2px 12px rgba(240, 98, 146, 0.1);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    cursor: pointer;
    background: #fff;
    transition: background-color 0.2s ease;
}

.faq-question:hover {
    background: #fafafa;
}

.faq-question h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    margin: 0;
    flex: 1;
}

.faq-toggle {
    font-size: 1.5rem;
    color: #666;
    transition: transform 0.2s ease;
    font-weight: 300;
    min-width: 20px;
    text-align: center;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    background: #fafafa;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-answer p {
    padding: 1.5rem 2rem;
    margin: 0;
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* FAQ Responsive */
@media (max-width: 768px) {
    .faq {
        padding: 3rem 1rem;
    }
    
    .faq-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    .faq-question {
        padding: 1.2rem 1.5rem;
    }
    
    .faq-question h3 {
        font-size: 1rem;
    }
    
    .faq-answer p {
        padding: 1.2rem 1.5rem;
    }
}

@media (max-width: 575px) {
    .faq {
        padding: 2rem 0.5rem;
    }
    
    .faq-title {
        font-size: 1.8rem;
    }
    
    .faq-question {
        padding: 1rem 1rem;
    }
    
    .faq-question h3 {
        font-size: 0.9rem;
    }
    
    .faq-answer p {
        padding: 1rem 1rem;
        font-size: 0.9rem;
    }
}


.about-section{
    margin: 20px 30px;
}

.about-desc{
    color:black; 
    margin-bottom: 20px;

}

.about-team{
    color:#9e4361;
        margin-bottom: 20px;


}

.about-values{
    color:#3e1623; 
}

.career-desc{
   margin: 2rem 0;
  padding: 1rem;
  display: block;
}

.contact-desc{
       margin: 2rem 0;
  padding: 1rem;
  display: block;
}
.help-desc{
    margin: 2rem 0;
  padding: 1rem;
  display: block;
}

.pricing-desc{
    margin: 2rem 0;
  padding: 1rem;
  display: block;
}

.privacy-desc{
margin: 2rem 0;
  padding: 4rem;
}