/*
Theme Name: Networking Plus
Text Domain: #
Version: 1.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: 
Author: Barid Ghosh
Author URI: #
Theme URI: #
 */


@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Defining explicit family for strict usage if needed */
@font-face {
    font-family: 'Montserrat-Bold';
    src: url('font/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --dark-blue: #0a0e27;
    --dark-purple: #1a1f3a;
    --red: #e63946;
    --light-blue: #4a9eff;
    --green: #06d6a0;
    --white: #ffffff;
    --gray: #6c757d;
    --dark-gray: #2a2f4a;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--dark-blue);
    color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #000000;
    z-index: 1000;
    padding: 0.2rem 0;
    /* Reduced padding to compensate for larger logo */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.5s ease-out;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(65deg, #2d2d95 0%, #742668 42%, #e31b23 100%);
    z-index: 1001;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.navbar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

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

.logo-image {
    height: 120px;
    /* Increased real size, contained in header */
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 1002;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-menu a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--red);
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-menu a:hover {
    color: var(--light-blue);
}

.contact-btn {
    background-image: linear-gradient(65deg, #2d2d95 0%, #742668 42%, #e31b23 100%);
    color: var(--white);
    padding: 0.6rem 1.8rem;
    /* Slightly larger padding to match image */
    border-radius: 9px;
    /* Slightly softer radius */
    border: 2px solid #ffffff;
    transition: all 0.3s ease;
    font-family: 'Montserrat-Bold', sans-serif;
    /* Use explicit bold family */
    font-size: 1rem;
    letter-spacing: 0.5px;
    /* Slight spacing for readability */
    text-transform: none;
    background-clip: padding-box;
    display: inline-block;
    /* Ensure proper sizing */
}

.contact-btn:hover {
    background-image: linear-gradient(65deg, #2d2d95 0%, #742668 42%, #e31b23 100%);
    color: var(--white) !important;
    /* Ensure text remains white - override nav link hover */
    border-color: var(--white);
    /* White border on hover */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.5);
}

.contact-btn::after {
    display: none;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--white);
    transition: all 0.3s ease;
}

/* Hero Section */
.hero {
    margin-top: 80px;
    padding: 4rem 2rem;
    position: relative;
    overflow: visible;
    min-height: 600px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--dark-purple) 100%);
    background-image: url('images/shape_69.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.8s ease-out;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content {
    animation: fadeInLeft 1s ease-out;
    position: relative;
    z-index: 2;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--white);
    /* Changed to solid white */
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.cta-button {
    background-image: linear-gradient(65deg, #2d2d95 0%, #742668 42%, #e31b23 100%);
    color: var(--white);
    padding: 1rem 2.5rem;
    border: 2px solid #ffffff;
    /* White border as per screenshot */
    border-radius: 9px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 1rem;
    /* Reduced from 2rem */
    background-clip: padding-box;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.5);
}

.hero-features {
    list-style: disc;
    /* Use standard bullets */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 2.5rem;
    /* Wider gap between items */
    row-gap: 0.5rem;
    margin-top: 1.5rem;
    padding-left: 1.2rem;
    /* indentation for bullets */
}

.hero-features li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    display: list-item;
    /* Ensure list-item behavior for bullets */
    align-items: center;
}

.hero-media {
    position: relative;
    animation: fadeInRight 1s ease-out;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.product-by {
    margin-top: 0;
    /* Removed top margin to close the gap */
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

.product-by strong {
    font-weight: 700;
    color: var(--white);
    display: block;
    margin-top: 0.2rem;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.video-placeholder {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    background: #000;
    position: relative;
    transition: transform 0.3s ease;
}

.video-wrapper {
    position: relative;
    padding-top: 56.25%;
    /* 16:9 */
    width: 100%;
    overflow: hidden;
}

.video-placeholder.video-link {
    text-decoration: none;
    display: block;
}

.youtube-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.youtube-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1;
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    z-index: 2;
    cursor: pointer;
    transition: all 0.3s ease;
}

.play-overlay:hover {
    background: rgba(0, 0, 0, 0.1);
}

.play-overlay.hidden {
    display: none;
}

.play-icon {
    font-size: 4rem;
    color: var(--white);
    opacity: 0.9;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.4);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
}

.video-placeholder:hover .play-icon {
    opacity: 1;
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.6);
}

/* RETRYING CLEAN IMPLEMENTATION */
.demo-tab {
    position: absolute;
    /* Changed from fixed to absolute per user request */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #d71d2b;
    color: var(--white);

    /* Reduced dimensions per user request "decrease the size" */
    padding: 1.5rem 0.8rem;
    border-radius: 20px 0 0 20px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    font-weight: bold;
    font-size: 1rem;
    z-index: 100;
    /* Lower z-index since it's inside hero now, but above hero bg */
    cursor: pointer;
    box-shadow: -2px 0 10px rgba(215, 29, 43, 0.4);

    writing-mode: vertical-rl;
    text-orientation: mixed;
    height: auto;
    width: auto;
}

.demo-tab:hover {
    background: #c1121f;
    transform: translateY(-50%) scale(1.05);
    /* Maintain center */
    box-shadow: -4px 0 15px rgba(215, 29, 43, 0.6);
}

.demo-icon-img {
    width: 24px;
    height: auto;
    /* Ensure icon is upright relative to vertical flow */
    transform: rotate(90deg);
    /* Triangle needs to point visually Right? */
    /* If the image is a right-pointing triangle:
       In vertical-rl, it sits in line.
       Rotated 180 block:
       If image points Right, 180 deg makes it point Left.
       Visual: points Left (into screen).
       If we want it pointing Right (out? or just a play button).
       Usually play button points Right.
       So we might need to rotate it so visually it points right.
       If rotated 180, we need to rotate image 180 too?
       Let's assume generic play icon needs to look like a play icon.
       If it points Left, it looks like "Back".
       So let's rotate it 180 relative to the tab.
    */
    transform: rotate(0deg);
    /* Let's start with 0, user can correct if upside down */
}

.demo-text {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

@keyframes pulse {

    0%,
    100% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.05);
    }
}

/* Section Styles */
.section-title {
    text-align: center;
    margin-bottom: 3rem;
    animation: fadeInUp 0.8s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.section-title-image {
    max-width: 100%;
    height: auto;
    max-height: 140px;
    /* Increased size per user request */
}

.section-description {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 3rem;
}

/* How It Works Section */
.how-it-works {
    padding: 8rem 2rem 5rem;
    background-color: #000000;
    background-image: url('images/layer_114_copy.png'), url('images/layer_114_copy_2.png'), url('images/layer_114_copy_3.png');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left top, left center, left bottom;
    background-size: auto, auto, auto;
}

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

.step-arrow {
    position: absolute;
    top: -20px;
    /* Adjust based on image curve */
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
    max-width: 150px;
    /* Limit size just in case */
}

.arrow-1 {
    left: 24%;
    top: 10px;
}

.arrow-2 {
    left: 49%;
    top: 280px;
}

.arrow-3 {
    left: 74%;
    top: 10px;
}

.step {
    text-align: center;
    animation: fadeInUp 0.8s ease-out;
    animation-fill-mode: both;
    padding: 1.5rem;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.step:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.step:nth-child(1) {
    animation-delay: 0.1s;
}

.step:nth-child(2) {
    animation-delay: 0.2s;
}

.step:nth-child(3) {
    animation-delay: 0.3s;
}

.step:nth-child(4) {
    animation-delay: 0.4s;
}

.step-image {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
}

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

.step h3 {
    color: var(--red);
    font-size: 1.5rem;
    margin-bottom: 0;
}

.step p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: bold;
}



.step-4 {
    grid-column: span 1;
}

.cta-center {
    text-align: center;
    margin-top: 3rem;
}

/* Image Styles */
.phone-image {
    width: 100%;
    max-width: 250px;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
    object-fit: contain;
}

.phone-image-small {
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
    object-fit: contain;
}

.person-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
    object-fit: contain;
}

.qr-code {
    width: 300px;
    height: auto;
    max-height: 300px;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
    object-fit: contain;
}

/* Complete Solution Section */
.complete-solution {
    padding: 5rem 2rem;
    background-color: #000000;
    background-image: url('images/layer_114_copy.png');
    background-repeat: no-repeat;
    background-position: right center;
}

.features-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.feature-card {
    text-align: center;
    padding: 2rem;
    background: #061733;
    border-radius: 15px;
    transition: all 0.3s ease;
    animation: fadeInUp 0.8s ease-out;
    animation-fill-mode: both;
}

.feature-card:nth-child(1) {
    animation-delay: 0.1s;
}

.feature-card:nth-child(2) {
    animation-delay: 0.2s;
}

.feature-card:nth-child(3) {
    animation-delay: 0.3s;
}

.feature-card:nth-child(4) {
    animation-delay: 0.4s;
}

.feature-card:nth-child(5) {
    animation-delay: 0.5s;
}

.feature-card:nth-child(6) {
    animation-delay: 0.6s;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(230, 57, 70, 0.3);
    border: 2px solid var(--red);
}

.feature-image {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

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

.feature-card h3 {
    color: var(--white);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.feature-card p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

/* Instant Introduction Emails Card - Special Styling */
.feature-card-email {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feature-card-email .email-heading {
    color: var(--white);
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    text-align: center;
}

.feature-card-email .email-heading br {
    display: block;
    margin-bottom: 0;
}

.feature-card-email .email-description {
    color: var(--white);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
    font-weight: normal;
    padding: 0 1rem;
}

/* Tagging System Card - Special Styling */
.feature-card-tagging {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feature-card-tagging .tagging-heading {
    color: var(--white);
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    text-align: center;
}

.feature-card-tagging .tagging-heading br {
    display: block;
    margin-bottom: 0;
}

.feature-card-tagging .tagging-description {
    color: var(--white);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
    font-weight: normal;
    padding: 0 1rem;
}

/* FAQ Section */
.faq-section {
    padding: 5rem 2rem;
    background: url('images/shape_69.jpg');
    /* Using dark constellation bg */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Blend with dark color to ensure contrast */
    background-color: rgba(10, 14, 39, 0.95);
    background-blend-mode: overlay;
}

.section-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 4rem;
    line-height: 1.6;
}

.faq-container {
    max-width: 1200px;
    /* Wider container for 2 cols */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

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

.faq-item {
    background: rgba(10, 14, 39, 0.6);
    /* Semi-transparent dark bg */
    border: 2px solid #6c5ce7;
    /* Neon purple/blue border */
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.2);
    /* Subtle glow */
}

.faq-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(108, 92, 231, 0.4);
}

.faq-question {
    width: 100%;
    background: transparent;
    color: #ff4757;
    /* Red/Orange text */
    padding: 1.2rem 1.5rem;
    border: none;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
    min-height: 5.5rem;
    /* Ensure equal height for 1 or 2 lines of text */
}

.faq-icon {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ff4757;
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: transparent;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    /* Increased for longer answers */
    padding: 0 1.5rem 1.5rem;
}

.faq-answer p {
    color: rgba(255, 255, 255, 0.9);
    /* White/Gray text */
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Revolutionize Section */
.revolutionize-section {
    padding: 5rem 2rem;
    background: url('images/shape_36.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.revolutionize-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.revolutionize-title {
    margin-bottom: 1.5rem;
    animation: fadeInLeft 0.8s ease-out;
    display: flex;
    justify-content: flex-start;
}

.revolutionize-title-image {
    max-width: 100%;
    height: auto;
    max-height: 100px;
}

.revolutionize-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.whatsapp-button {
    background: var(--white);
    color: var(--dark-blue);
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
    margin-bottom: 0;
}

.whatsapp-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.5);
}

.whatsapp-icon {
    font-size: 1.5rem;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.free-scans {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    text-decoration: underline;
    margin: 0;
}

.commitment-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    max-width: 500px;
    line-height: 1.5;
}

.revolutionize-image {
    animation: fadeInRight 0.8s ease-out;
}

/* Start Using Section */
.start-using {
    padding: 5rem 2rem;
    background: #000000;
    text-align: center;
}

.start-using-title {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.start-using-title-image {
    max-width: 100%;
    height: auto;
    max-height: 60px;
}

.whatsapp-link {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.whatsapp-link-image {
    max-width: 100%;
    height: auto;
    max-height: 40px;
}

.qr-code-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* Data & Privacy Section */
.data-privacy {
    padding: 3rem 2rem;
    background: url('images/shape_71.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: var(--white);
}

.data-privacy .section-title {
    margin-bottom: 1.5rem;
}

.privacy-content {
    max-width: 900px;
    margin: 0 auto;
}

.privacy-intro {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.privacy-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 1.5rem;
    max-width: 600px;
    display: inline-block;
    text-align: left;
    line-height: 1.4;
}

.privacy-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.3rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.privacy-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--white);
}

.google-api-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 1);
    max-width: 900px;
    margin: 0 auto;
}

/* Footer */
.footer {
    background: #0B0A14;
    padding: 3rem 2rem 1rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.footer-logo .logo-image {
    height: 180px;
    width: auto;
    object-fit: contain;
}

.social-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
}

.social-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.footer-column:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-column h4 {
    color: var(--white);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

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

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

.footer-column a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: var(--light-blue);
}

.footer-column p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

.footer-bottom {
    text-align: center;
    padding: 1rem;
    background-color: #1A0B4F;
    color: var(--white);
    margin-top: 2rem;
    margin-left: -2rem;
    margin-right: -2rem;
    margin-bottom: -1rem;
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST APPROACH
   Standard Breakpoints:
   - 320px: Extra small mobile devices
   - 480px: Small mobile devices  
   - 576px: Large mobile devices
   - 768px: Tablets
   - 992px: Small desktops/laptops
   - 1024px: Medium desktops
   - 1200px: Large desktops
   ============================================ */

/* Extra Small Devices (320px - 479px) */
@media (max-width: 479px) {

    /* Header & Navigation */
    .navbar {
        padding: 0 1rem;
    }



    /* Hero Section */
    .hero {
        padding: 3rem 1rem;
        min-height: auto;
        margin-top: 125px;
    }

    .hero-title {
        font-size: 1.4rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .hero-description {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .cta-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        width: 100%;
        max-width: 280px;
    }

    .product-by {
        font-size: 0.9rem;
    }

    .hero-features {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.85rem;
    }

    /* Section Titles */
    .section-title-image {
        max-height: 50px;
    }

    /* How It Works */
    .how-it-works {
        padding: 3rem 1rem;
    }

    .step {
        padding: 1rem;
    }

    .step p {
        font-size: 0.9rem;
    }

    .step-image {
        min-height: 200px;
    }

    /* Features */
    .complete-solution {
        padding: 3rem 1rem;
    }

    .feature-card {
        padding: 1.5rem 1rem;
    }

    .feature-card h3 {
        font-size: 1.1rem;
    }

    .feature-card p {
        font-size: 0.85rem;
    }

    .feature-image {
        min-height: 250px;
    }

    /* FAQ */
    .faq-section {
        padding: 3rem 1rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }

    .faq-question {
        font-size: 0.95rem;
        padding: 1rem;
        min-height: auto;
    }

    .faq-answer p {
        font-size: 0.85rem;
    }

    /* Revolutionize Section */
    .revolutionize-section {
        padding: 3rem 1rem;
    }

    .revolutionize-title-image {
        max-height: 70px;
    }

    .revolutionize-description {
        font-size: 0.95rem;
    }

    .whatsapp-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        width: 100%;
    }

    .free-scans {
        font-size: 0.8rem;
        text-align: center;
        width: 100%;
    }

    .commitment-text {
        font-size: 0.8rem;
    }

    /* Start Using */
    .start-using {
        padding: 3rem 1rem;
    }

    .start-using-title-image {
        max-height: 45px;
    }

    .whatsapp-link-image {
        max-height: 35px;
    }

    .qr-code {
        width: 200px;
        max-height: 200px;
    }

    /* Data & Privacy */
    .data-privacy {
        padding: 2rem 1rem;
    }

    .data-privacy-title-image {
        max-height: 45px;
    }

    .privacy-intro,
    .privacy-list li {
        font-size: 0.85rem;
    }

    .google-api-text {
        font-size: 0.75rem;
    }

    /* Footer */
    .footer {
        padding: 2rem 1rem 1rem;
    }

    .footer-logo .logo-image {
        height: 120px;
    }

    .footer-column h4 {
        font-size: 1rem;
    }

    .footer-column a,
    .footer-column p {
        font-size: 0.85rem;
    }

    /* Demo Tab */
    .demo-tab {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        gap: 0.4rem;
    }

    .demo-icon-img {
        width: 20px;
    }
}

/* Small Devices (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
    .hero-title {
        font-size: 1.6rem;
    }

    .cta-button {
        padding: 0.85rem 2rem;
        font-size: 1rem;
    }

    .section-title-image {
        max-height: 55px;
    }

    .qr-code {
        width: 220px;
        max-height: 220px;
    }
}

/* Mobile Devices - General (up to 767px) */
@media (max-width: 767px) {

    /* Mobile Navigation */
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 0;
        flex-direction: column;
        background-color: #000000;
        background-image: url('images/layer_114_copy_2.png'), url('images/layer_114_copy.png');
        background-position: left bottom, right top;
        background-repeat: no-repeat, no-repeat;
        background-size: 100px auto, 100px auto;
        width: 100%;
        height: 100vh;
        overflow-y: auto;
        text-align: center;
        transition: left 0.3s ease;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 8rem 0 2rem 0;
        padding-top: calc(120px + 2rem);
        z-index: 999;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu li {
        margin: 1rem 0;
    }

    .hamburger {
        display: flex;
        z-index: 1001;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* Hero Section */
    .hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .video-placeholder {
        max-width: 100%;
    }

    /* Demo Tab - Mobile Layout */
    .demo-tab {
        position: static;
        transform: none;
        writing-mode: horizontal-tb;
        flex-direction: row;
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
        max-width: none;
        width: fit-content;
        flex-shrink: 0;
        right: auto;
        top: auto;
        margin: 1.25rem auto 0;
        border-radius: 15px;
        align-self: center;
        box-shadow: 0 4px 12px rgba(215, 29, 43, 0.35);
    }

    .demo-tab:hover {
        transform: scale(1.03);
    }

    .hero .demo-icon-img {
        transform: none;
    }

    .hero {
        overflow: hidden;
        flex-direction: column;
    }

    /* How It Works - Vertical Layout */
    .steps-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .step-arrow {
        display: block;
        position: static;
        transform: none;
        margin: 0 auto;
        max-width: 80px;
        height: auto;
    }

    .step:nth-of-type(1) {
        order: 1;
    }

    .arrow-1 {
        order: 2;
        transform: rotate(90deg);
        margin: -10px auto;
    }

    .step:nth-of-type(2) {
        order: 3;
    }

    .arrow-2 {
        order: 4;
        transform: rotate(90deg) scaleY(-1);
        margin: -10px auto;
    }

    .step:nth-of-type(3) {
        order: 5;
    }

    .arrow-3 {
        order: 6;
        transform: rotate(90deg);
        margin: -10px auto;
    }

    .step:nth-of-type(4) {
        order: 7;
    }

    .step:not(:last-child)::after {
        display: none;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* FAQ */
    .faq-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Revolutionize Section */
    .revolutionize-container {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {

    /* Header */
    .logo-image {
        height: 80px;
    }

    .nav-menu {
        gap: 1.5rem;
    }

    .nav-menu a {
        font-size: 0.95rem;
    }

    /* Hero */
    .hero {
        padding: 3rem 2rem;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hero-title {
        font-size: 2rem;
        text-align: center;
    }

    .hero-description {
        font-size: 1.05rem;
        text-align: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero-features {
        justify-content: center;
    }

    /* Demo Tab */
    .demo-tab {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        writing-mode: vertical-rl;
        flex-direction: row;
        padding: 1.2rem 0.7rem;
        font-size: 0.95rem;
    }

    /* How It Works */
    .steps-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .arrow-1,
    .arrow-2,
    .arrow-3 {
        display: none;
    }

    /* Features */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    /* FAQ */
    .faq-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Revolutionize */
    .revolutionize-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .revolutionize-title {
        justify-content: center;
    }

    .revolutionize-image {
        justify-content: center;
    }

    .revolutionize-image .person-image {
        margin-top: 0;
        margin-right: 0;
        max-height: 400px;
    }

    .cta-row {
        justify-content: center;
    }

    /* Footer */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

/* Small Desktops (992px - 1023px) */
@media (min-width: 992px) and (max-width: 1023px) {
    .navbar {
        padding: 0 1.5rem;
    }

    .nav-menu {
        gap: 1.5rem;
    }

    .hero-container {
        gap: 2rem;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .steps-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

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

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

/* Medium Desktops (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .navbar {
        max-width: 1000px;
    }

    .hero-container,
    .steps-container,
    .features-grid,
    .faq-container,
    .revolutionize-container,
    .footer-container {
        max-width: 1000px;
    }

    .nav-menu {
        gap: 1.5rem;
    }

    .hero-title {
        font-size: 2.3rem;
    }

    .steps-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

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

    .revolutionize-container {
        grid-template-columns: 1fr 1fr;
    }

    .footer-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large Desktops (1200px and above) */
@media (min-width: 1200px) {

    /* Default styles already optimized for large screens */
    .navbar,
    .hero-container,
    .steps-container,
    .features-grid,
    .faq-container,
    .revolutionize-container,
    .footer-container {
        max-width: 1200px;
    }

    .steps-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .revolutionize-container {
        grid-template-columns: 1fr 1fr;
    }

    .footer-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Extra Large Desktops (1400px and above) */
@media (min-width: 1400px) {

    .navbar,
    .hero-container,
    .steps-container,
    .features-grid,
    .faq-container,
    .revolutionize-container,
    .footer-container {
        max-width: 1320px;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .section-title-image {
        max-height: 160px;
    }
}

/* Ultra Wide Screens (1920px and above) */
@media (min-width: 1920px) {

    .navbar,
    .hero-container,
    .steps-container,
    .features-grid,
    .faq-container,
    .revolutionize-container,
    .footer-container {
        max-width: 1600px;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Image Responsive Styles */
.step-image img,
.feature-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.step-image,
.feature-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Decorative Separator */
.section-separator-container {
    position: relative;
    width: 100%;
    height: 0;
    /* Don't add structural spacing, just visual */
    z-index: 10;
    pointer-events: none;
}

.separator-image-left {
    position: absolute;
    left: 0;
    top: -200px;
    /* Pull it up to overlap the previous section bottom and next section top */
    transform: translateY(-50%);
    max-width: 400px;
    /* Adjust size as needed based on image */
    width: 100%;
    height: auto;
}

/* Revolutionize Section */
.revolutionize-section {
    background-image: url('images/shape_36.jpg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    /* Dark blue background fallback */
    background-color: #06063b;
    padding: 3rem 2rem;
    position: relative;
    overflow: visible;
    /* Allow pop-out */
}

.revolutionize-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

.revolutionize-content {
    flex: 1;
    color: var(--white);
    max-width: 800px;
}

.revolutionize-title img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
}

.revolutionize-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.cta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: nowrap;
    margin-bottom: 1.5rem;
}

.whatsapp-button {
    background: linear-gradient(90deg, #1c2866 0%, #e63946 100%);
    color: var(--white);
    padding: 0.8rem 2rem;
    border: 2px solid #ffffff;
    border-radius: 9px;
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.whatsapp-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.5);
}

.free-scans {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    white-space: nowrap;
}

.commitment-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

.revolutionize-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
    align-self: flex-end;
}

.revolutionize-image .person-image {
    max-width: 100%;
    width: auto;
    max-height: 550px;
    margin-top: -150px;
    /* 3D Pop-out effect */
    position: relative;
    z-index: 10;
    margin-right: -2rem;
    /* Pull right slightly */
    border-radius: 0;
    /* Ensure no border radius on cutout */
}

@media (max-width: 900px) {
    .revolutionize-container {
        flex-direction: column-reverse;
        text-align: center;
        gap: 3rem;
    }

    .revolutionize-image {
        justify-content: center;
        width: 100%;
    }

    .revolutionize-image .person-image {
        margin-top: 0;
        /* Remove pop-out on mobile/tablet if needed, or keep smaller */
        margin-right: 0;
        max-height: 400px;
        transform: translateY(-30px);
        /* Slight pop-up on mobile */
    }

    .cta-row {
        justify-content: center;
        flex-wrap: wrap;
    }

    .revolutionize-title img {
        margin: 0 auto 1.5rem;
    }
}