/* ============================= */
/* RESET & BASE STYLES */
/* ============================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6, p, a, li, span, div {
    font-family: 'Inter', sans-serif;
}


/* General Media Queries for Responsiveness */

/* Mobile First Approach */

/* Reset and Ensure Visibility */
@media (max-width: 768px) {
    /* Scale down everything */
    html, body {
        font-size: 14px; /* Reduce base font size */
        overflow-x: hidden; /* Prevent horizontal scrolling */
        margin: 0;
        padding: 0;
    }
}

/* Navigation Bar Styling */
.navbar {
    background-color: #f8f9fa; /* Light grey background */
    padding: 0.8rem 1rem; /* Spacing for clarity */
}

/* Navbar Brand (Logo) */
.navbar-brand img {
    max-height: 50px; /* Ensures logo is well-scaled */
    width: auto;
}

/* Navbar Items */
.navbar-nav .nav-item {
    margin: 0 10px; /* Spacing between menu items */
}

/* Navbar Links */
.navbar-nav .nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    transition: color 0.3s ease-in-out;
}

/* Navbar Links Hover Effect */
.navbar-nav .nav-link:hover {
    color: #007bff;
}

/* Navbar Toggler (Hamburger Menu) */
.navbar-toggler {
    border: none;
    background: none;
    font-size: 1.5rem;
    position: absolute;
    right: 1rem;
    padding: 0;
}

/* Remove the default button style */
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none;
    box-shadow: none;
}

/* Modify the Hamburger Icon */
.navbar-toggler-icon {
    width: 25px;
    height: 3px;
    background-color: #333;
    display: block;
    position: relative;
}

/* Reduce from three lines to two */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: "";
    width: 24px;
    height: 3px;
    background-color: #333;
    position: absolute;
    left: 0;
    display: block;
    transition: all 0.3s ease-in-out;
}

.navbar-toggler.open .navbar-toggler-icon {
    background-color: transparent; /* Hide main line */
}

.navbar-toggler.open .navbar-toggler-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.navbar-toggler.open .navbar-toggler-icon::after {
    transform: rotate(-45deg);
    top: 0;
}


/* First line (top) */
.navbar-toggler-icon::before {
    top: -6px;
}

/* Second line (bottom) */
.navbar-toggler-icon::after {
    top: 6px;
}

/* Hide the middle line to create a two-line menu */
.navbar-toggler-icon.middle-line {
    display: none;
}

/* Position the two lines */
.navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler-icon::after {
    top: 8px;
}

.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    height: 0.75px; /* Reduce thickness */
    background-color: black; /* Change color if needed */
}

/* Default navbar */
#navbar {
    transition: background-color 0.3s, box-shadow 0.3s;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

/* Add padding so content doesn't get hidden under navbar */
body {
    padding-top: 80px; /* Adjust based on navbar height */
}

/* Dark & Transparent Navbar on Scroll */
#navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.6); /* Adjust transparency */
    backdrop-filter: blur(5px); /* Optional: adds a blur effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Change text & logo color */
#navbar.scrolled .nav-link {
    color: #fff !important;
}

#navbar.scrolled .navbar-brand img {
    filter: brightness(0) invert(1); /* Makes logo white */
}




/* Alignments for Desktop */
@media (min-width: 992px) {
    .navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Ensure items are centered */
    .navbar-nav {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Hide the hamburger menu on larger screens */
    .navbar-toggler {
        display: none;
    }
}



@media (max-width: 991px) {
    /* Center the logo */
    .navbar-brand {
        margin-left: 0;
        margin-right: auto;
    }

    /* Full-width collapsed menu */
    .navbar-collapse {
        text-align: center;
        background: #fff;
        padding: 1rem 0;
    }

    /* Make menu items full-width */
    .navbar-nav .nav-item {
        width: 100%;
        padding: 0.5rem 0;
    }

    /* Hamburger Menu Icon Spacing */
    .navbar-toggler {
        position: absolute;
        right: 1rem;
    }
}

/* Hide elements initially */
.slide-in {
    opacity: 0;
    transform: translateY(50px); /* Start slightly lower */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* When in view, slide up and fade in */
.slide-in.active {
    opacity: 1;
    transform: translateY(0);
}

/* Remove dropdown arrows */
.navbar-nav .dropdown-toggle::after {
    display: none !important;
}

/* Full-width dropdown */
.full-width-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    background: rgba(0, 0, 0, 0.9); /* More opaque for better readability */
    padding: 20px 0;
    display: none;
    text-align: center;
    z-index: 1000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(0); /* Ensure it's aligned properly */
}

/* Center the dropdown content */
.full-width-dropdown .dropdown-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* Support Dropdown: Horizontal Layout */
.support-dropdown {
    display: flex;
    flex-direction: row; /* Changed from column to row */
    gap: 20px; /* Spacing between items */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center vertically (optional) */
    width: 100%;
}

/* About Us Dropdown: 3x3 Grid */
.about-dropdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    text-align: left;
    width: 100%;
}

/* Dropdown items styling */
.full-width-dropdown .dropdown-item {
    color: #fff;
    padding: 12px 20px;
    font-size: 16px;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.full-width-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Show dropdown when active */
.full-width-dropdown.show {
    display: block;
}

/* Navbar specific adjustments */
.navbar {
    position: relative; /* Important for dropdown positioning */
}

.nav-item.dropdown {
    position: static; /* Makes dropdown relative to navbar */
}




/* ============================= */
/* HERO SECTION */
/* ============================= */
.hero {
    background: #5a24be;
    color: white;
    text-align: center;
    padding: 60px 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    
}

/* GRID BACKGROUND */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px), 
        linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.4;
    pointer-events: none;
}

/* CONTAINER */
.hero-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
}

.hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 1rem; /* Reduced bottom margin */
}

* Remove the margin pushing the image down */
.hero-image {
    align-self: flex-end; /* Sticks the image at the bottom */
}

.hero-image img {
    margin-top: auto;
    max-width: 40%;
    height: auto;
}

/* HERO TEXT */
.hero h1 {
    font-size: 36px;
    font-weight: bold;
    max-width: 700px;
    margin: 0 auto;
}

/* Underline Brush Stroke */
.highlight {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

.highlight::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: 200%;
    height: 35px;
    background: url('images/brush_stroke_gradient.png') no-repeat center;
    background-size: contain;
    transform: translateX(-50%);
}

/* SUBHEADER */
.subheader {
    font-size: 20px;
    margin-top: 15px;
    opacity: 0.9;
}

/* ============================= */
/* WAITLIST CTA */
/* ============================= */
.waitlist-cta {
    margin-top: 15px;
}

.waitlist-cta p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    opacity: 0.9;
}

.waitlist-cta button {
    background: #ffd700;
    color: #5a24be;
    font-size: 18px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.waitlist-cta button:hover {
    background: #ff9800;
}

/* ============================= */
/* SOCIAL PROOF (OVERLAPPING CIRCLES) */
/* ============================= */
/* Overlapping Circles (Social Proof) */
/* Overlapping Circles (Social Proof) */
.overlapping-circles {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 15px; /* Controls spacing above & below */
    position: relative;
}

/* Style for each user image */
.circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    position: relative;
    transition: transform 0.3s ease-in-out;
}

/* Position circles to overlap */
.circle:not(:first-child) {
    margin-left: -25px; /* This ensures images overlap properly */
}

/* Hover effect */
.circle:hover {
    transform: scale(1.1);
}

/* Position circles to slightly overlap */
.circle:nth-child(1) { left: -20px; z-index: 3; }
.circle:nth-child(2) { left: -10px; z-index: 2; }
.circle:nth-child(3) { left: 0px; z-index: 1; }
.circle:nth-child(4) { left: 10px; z-index: 0; }

/* Hover effect */
.circle:hover {
    transform: scale(1.1);
}


/* IMAGE GRID - Positioned between text and CTA */
.image-grid {
    margin: 15px auto; /* Add space above and below */
    display: flex;
    justify-content: center;
    gap: 10px;
}

.image-grid img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    transition: transform 0.3s ease-in-out;
}

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

@media (max-width: 768px) {
    .hero-section {
        position: relative; /* Ensures child elements can use absolute positioning */
        height: 100vh; /* Keeps the hero section stable */
        overflow: hidden; /* Prevents unnecessary scrolling */
    }

    .hero-image {
        position: absolute;
        bottom: -80px; /* Move the image further down (adjust as needed) */
        left: 50%;
        transform: translateX(-50%); /* Centers the image */
        width: 90%; /* Make it larger */
        max-width: 500px; /* Prevent it from being too large */
        height: auto; /* Maintain aspect ratio */
    }
}




/* Meet CallMed Linq Section */
.meet-callmed {
    background: linear-gradient(to right, #5a24be, #8e44ad); /* Gradient Background */
    color: #fff; /* White text for contrast */
    text-align: center;
    padding: 80px 20px;
}

.meet-callmed h2 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #ffde59; /* Gold accent for emphasis */
}

.meet-callmed p {
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0.9; /* Slight transparency for a softer look */
}

/* Responsive Design */
@media (max-width: 768px) {
    .meet-callmed {
        padding: 60px 15px;
    }

    .meet-callmed h2 {
        font-size: 28px;
    }

    .meet-callmed p {
        font-size: 16px;
    }
}

/* WHY PEOPLE LOVE CALLMED SECTION */
.why-callmed {
    text-align: center;
    background: #f8f8f8;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

/* Background pattern for a subtle design */
.why-callmed::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/pattern.svg'); /* Replace with an abstract pattern */
    background-size: cover;
    opacity: 0.08;
    z-index: 0;
}

.why-callmed h2 {
    font-size: 36px;
    color: #5a24be;
    font-weight: bold;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

/* 4x2 Grid Layout */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Feature Card Styling */
.feature-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

/* Icon Styling */
.feature-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

/* Heading */
.feature-card h3 {
    font-size: 20px;
    color: #5a24be;
    margin-bottom: 10px;
}

/* Description */
.feature-card p {
    font-size: 14px;
    color: #555;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
    }
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

/* General animation styling */
.animate {
    opacity: 0;
    transform: translateY(50px); /* Start lower */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Slide-in effect for the whole section */
.animate.slide-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered fade-in effect for feature cards */
.feature-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* When in view, cards fade in one by one */
.feature-card.visible {
    opacity: 1;
    transform: translateY(0);
}


.about-section {
    padding: 80px 20px;
    background: #f8f8f8;
}

.about-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1400px; /* Increased for better layout */
    margin: 0 auto;
    gap: 40px;
    flex-wrap: wrap; /* Ensures responsiveness */
}

.about-left, .about-right {
    flex: 1; /* Ensures both sides take equal space */
    min-width: 45%; /* Prevents collapsing */
}

.purple-line, .green-line {
    width: 60px;
    height: 4px;
    background: #5a24be;
    margin-bottom: 20px;
}

.green-line {
    width: 200px; /* Longer line for emphasis */
    height: 8px;
    background: #40be24;
    margin-bottom: 20px;
}

h2 {
    font-size: 32px;
    color: #333;
}

.value-proposition blockquote {
    font-style: regular;
    background: #fff;
    padding: 15px;
    border-left: 5px solid #5a24be;
}

.features-list {
    list-style: none;
    padding: 0;
}

.features-list li {
    margin-bottom: 20px;
}

.features-list strong {
    font-size: 18px;
    color: #5a24be;
}

.features-list p {
    font-size: 16px;
    color: #555;
}

/* General animation styling */
.animate {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Left side sliding in */
.animate.slide-in-left {
    transform: translateX(-50px);
}

/* Right side sliding in */
.animate.slide-in-right {
    transform: translateX(50px);
}

/* Ensure animations become visible */
.slide-in-left.visible, .slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}


/* FEATURES SECTION */
.features {
    padding: 2rem 1rem;
    background-color: #f4f4f4;
}

.features-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: repeat(4, 1fr); /* 4 rows */
    gap: 0;
}

/* Feature Square Container */
/* Stack title on top and description below */
.feature-square {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center;
    text-align: center;
    gap: 10px; /* Add spacing between title and description */
}


/* Smartwatch & App Images */
.sync-image {
    width: 100px; /* Reduced size for better layout */
    height: auto;
    transform: translateY(20px);
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
    opacity: 0;
}

/* Sync Icon (Smaller & No Rotation) */
.sync-icon {
    width: 28px; /* Optimal size for clarity */
    height: 28px;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.features-section .feature-square:first-child {
    display: flex;
    flex-direction: row; /* Arrange items in a row */
    align-items: center; /* Align images vertically */
    justify-content: center; /* Center images horizontally */
    gap: 15px; /* Add spacing between images */
}

.features-section .feature-square:first-child .sync-image {
    width: 150px; /* Increase the size */
    height: auto; /* Maintain aspect ratio */
}

.features-section .feature-square:first-child .sync-icon {
    width: 20px; /* Reduce the width */
    height: auto; /* Maintain aspect ratio */
}



/* Feature Heading Styling */
.feature-square h3 {
    font-size: 2.4rem; /* Large font size */
    font-weight: bold; /* Bold text */
    background: linear-gradient(to right, #5a24be, #40be24); /* Gradient effect */
    -webkit-background-clip: text; /* Clip background to text */
    -webkit-text-fill-color: transparent; /* Make text take the gradient color */
    text-align: center; /* Center align */
    margin-bottom: 0.5rem; /* Space below heading */
}


.feature-square p {
    font-size: 1rem;
}

/* Show Animation when in View */
.show .sync-image {
    opacity: 1;
    transform: translateY(0);
}

.show .sync-icon {
    opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .features-section {
        grid-template-columns: 1fr; /* 1 column on smaller screens */
        grid-template-rows: repeat(8, 1fr); /* 8 rows on smaller screens */
    }
}

/* Individual feature block */
.feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease-in-out;
}

/* Hover effect */
.feature:hover {
    transform: translateY(-5px);
}

/* Image and Text Styling */
.feature-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.feature:nth-child(2) .feature-image img {
    width: 100%; /* Make it fill its container */
    max-width: 600px; /* Increase the max size */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center the image */
}

/* Text Section */
.feature-text {
    flex: 1;
    text-align: left;
    padding: 0 30px;
}

.feature-text h3 {
    font-size: 24px;
    color: #5a24be;
    font-weight: bold;
    margin-bottom: 10px;
}

.feature-text p {
    font-size: 16px;
    color: #555;
}

/* Alternate Layout - Even features have text left, image right */
.feature:nth-child(even) {
    flex-direction: row-reverse;
}

/* Responsive Design */
@media (max-width: 768px) {
    .feature {
        flex-direction: column;
        text-align: center;
    }

    .feature:nth-child(even) {
        flex-direction: column;
    }

    .feature-text {
        padding: 20px 0;
    }
}

/* Features Grid */
.features-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 40px 0;
    justify-content: center;
    align-items: center;
}

.feature-square {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-square img {
    width: 100%;
    max-width: 150px;
    transition: transform 0.3s ease;
}

/* Increase size of Subscription Plan Image (Square 4) */
.feature-square:nth-child(4) img {
    width: 900px; /* Increase size */
    max-width: 100%; /* Ensures responsiveness */
    height: auto; /* Maintain aspect ratio */
}

.feature-square:nth-child(5) img {
    width: 900px; /* Increase size */
    max-width: 100%; /* Ensures responsiveness */
    height: auto; /* Maintain aspect ratio */
}

/* Target the eighth square specifically */
.feature-square:nth-child(8) img {
    width: 450px;  /* Increase size */
    max-width: 100%; /* Allow it to scale without breaking layout */
    height: auto; /* Maintain aspect ratio */
}

/* Staggered Image Container */
.staggered-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between images */
    flex-wrap: wrap;
    position: relative;
}

.features-section .feature-square.staggered-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: repeat(2, auto); /* 2 rows */
    gap: 10px; /* Adjust spacing between images */
    justify-content: center;
    align-items: center;
}


/* Individual Images */
.image-item {
    width: 100px; /* Adjust size as needed */
    height: auto;
    object-fit: contain;
    transition: transform 0.5s ease-in-out;
}

/* Container for Images */
.staggered-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Space between images */
    flex-wrap: wrap;
    position: relative;
}

/* Image Styling */
.image-item {
    width: 120px; /* Adjust size as needed */
    height: auto;
    object-fit: contain;
}

/* Responsive Layout for Smaller Screens */
@media (max-width: 768px) {
    .staggered-images {
        gap: 10px; /* Reduce gap on smaller screens */
    }
    .image-item {
        width: 100px; /* Slightly smaller images on mobile */
    }
}

@media (max-width: 768px) { /* Mobile View */
    .features-section {
        display: grid;
        grid-template-columns: 1fr; /* Single-column layout */
        grid-template-areas: 
            "text1" 
            "image1" 
            "text2"
            "image2"
            "text3"
            "image3"
            "text4"
            "image4"
            "text5"
            "image5";
        row-gap: 5px; /* Reduced space between squares */
    }

    .feature-square {
        padding: 10px; /* Reduce padding inside squares */
        margin: 0; /* Remove extra margin */
    }

    /* Reduce image sizes slightly */
    .feature-square img {
        max-width: 100%;
        height: auto;
    }

    /* Assign grid areas */
    .feature-square:nth-child(2) { grid-area: text1; } /* Square 2 */
    .feature-square:nth-child(1) { grid-area: image1; } /* Square 1 */
    
    .feature-square:nth-child(3) { grid-area: text2; } /* Square 3 */
    .feature-square:nth-child(4) { grid-area: image2; } /* Square 4 */
    
    .feature-square:nth-child(6) { grid-area: text3; } /* Square 6 */
    .feature-square:nth-child(5) { grid-area: image3; } /* Square 5 */
    
    .feature-square:nth-child(7) { grid-area: text4; } /* Square 7 */
    .feature-square:nth-child(8) { grid-area: image4; } /* Square 8 */
    
    .feature-square:nth-child(10) { grid-area: text5; } /* Square 10 */
    .feature-square:nth-child(9) { grid-area: image5; } /* Square 9 */
}

@media (max-width: 768px) {
    .square-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center everything */
        gap: 15px; /* Reduce space between elements */
    }

    .square {
        width: auto; /* Allow each square to take only needed space */
        max-width: 90%;
        padding: 10px 15px;
        text-align: center;
        border-radius: 10px;
    }

    /* Text squares adjust to content */
    .text-square {
        background: #f8f9fa; /* Light background */
        width: auto;
        max-width: 90%;
        padding: 10px 15px;
        font-size: 16px;
        line-height: 1.5;
    }

    /* Image squares adjust to image size */
    .image-square {
        width: auto; /* Allow images to take their natural size */
        max-width: 90%;
        display: flex;
        justify-content: center;
    }

    .image-square img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
}

/* Container Styling */
.vetting-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 50px;
    position: relative;
}

/* Text Section */
.vetting-text {
    flex: 1;
    opacity: 0; /* Hidden initially */
    transform: translateX(-50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    text-align: justify;
}

.vetting-text p {
    max-width: 90%; /* Ensure text doesn’t take full width */
    font-size: 1rem; /* Adjust font size */
    line-height: 1.8; /* Increase line spacing for readability */
    word-wrap: break-word; /* Ensure long words don’t overflow */
}



/* Adjust the vetting line */
.vetting-line {
    position: absolute;
    right: 50%; /* Move line more towards the left */
    width: 10px;
    background: linear-gradient(to bottom, #5A24BE, #40BE24);
    height: 50%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}


/* Image Section */
.vetting-image img {
    width: 500px;
    max-width: 100%; 
    border-radius: 20px;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* When image is visible */
.vetting-image img.show {
    opacity: 1;
    transform: translateX(0);
}


/* Animation Triggers */
.show .vetting-text {
    opacity: 1;
    transform: translateX(0);
}

.show .vetting-line {
    opacity: 1;
}

.show .vetting-image img {
    opacity: 1;
    transform: translateX(0);
}


/* Waitlist Button */
.waitlist-btn {
    background: #6200ea;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.waitlist-btn:hover {
    background: #4a00c4;
}

/* Waitlist Form (Hidden Initially) */
.waitlist {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Overlay to Close the Form */
.waitlist-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
}

/* Waitlist Content */
.waitlist-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    max-width: 400px;
    width: 90%;
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* Show Waitlist Form */
.waitlist.show {
    opacity: 1;
    visibility: visible;
}

/* Input Styles */
.waitlist input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Button */
.waitlist button {
    background: #6200ea;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.waitlist button:hover {
    background: #4a00c4;
}

/* Animation */
.animate {
    transform: translateY(50px);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.waitlist.show .animate {
    transform: translateY(0);
    opacity: 1;
}

/* Integrations Section */
.integrations {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #e0f7fa, #f1f8ff);
}

.integrations h2 {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.integrations p {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

/* Slider Container */
.integration-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    padding: 10px 0;
}

/* Sliding Track */
.integration-track {
    display: flex;
    gap: 50px;
    animation: slide 15s linear infinite;
}

.integration-track img {
    height: 50px;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
}

.integration-track img:hover {
    transform: scale(1.1);
}

/* Keyframe Animation */
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .vetting-container {
        display: flex;
        flex-direction: column; /* Stacks items vertically */
        align-items: center; /* Centers everything */
        text-align: center; /* Centers text */
        padding: 20px;
    }

    .vetting-text {
        width: 100%; /* Takes full width */
        max-width: 400px; /* Prevents text from being too wide */
        margin-bottom: 20px; /* Spacing between text and image */
    }

    .vetting-line {
        display: none; /* Hides the gradient line on mobile */
    }

    .vetting-image {
        width: 100%; /* Makes the image responsive */
        max-width: 350px; /* Prevents it from being too large */
    }

    .vetting-image img {
        width: 100%;
        height: auto;
        border-radius: 10px; /* Optional: Smooth corners */
    }
}





/* Demo Section */
.demo-section {
    text-align: center;
    padding: 50px 20px;
    background: #f8f8f8;
}

/* Demo Container */
.demo-container {
    max-width: 900px;
    margin: auto;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); /* Adds depth */
    overflow: hidden;
}

iframe {
    border-radius: 10px;
    width: 100%;
    height: 500px;
    border: none;
    pointer-events: auto;
}

/* Demo Controls */
.demo-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

/* Demo Buttons */
.demo-btn {
    background: #6200ea;
    border: none;
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.demo-btn:hover {
    background: #4a00c4;
}

.demo-btn img {
    width: 24px;
    height: 24px;
}

/* Buttons with Icons */
.demo-btn img {
    width: 40px; /* Adjust icon size */
    height: 40px;
    filter: brightness(0) invert(1); /* Makes icons white for dark backgrounds */
}

.demo-btn:hover {
    transform: scale(1.1);
}

/* Tooltip Container */
.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Tooltip Arrow */
.tooltip::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* Active Tooltip */
.tooltip.active {
    opacity: 1;
    transform: scale(1);
}

/* Tooltip Button */
.tooltip-btn {
    background: #007BFF; /* CallMed Blue */
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 6px rgba(0, 123, 255, 0.3);
}

/* Hover Effect */
.tooltip-btn:hover {
    background: #0056b3;
    box-shadow: 0px 6px 10px rgba(0, 86, 179, 0.4);
}

/* Click Effect */
.tooltip-btn:active {
    transform: scale(0.95);
}

/* Centering the Button */
.tooltip-btn-container {
    text-align: center;
    margin-top: 20px;
}

/* Animation Effects */
.animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Fixing Overlay for Intro.js */
.introjs-overlay {
    z-index: 0 !important; /* Move overlay behind iframe */
    background: transparent !important; /* Remove dark background */
}





/* ============================= */
/* WAITLIST FORM */
/* ============================= */
.waitlist {
    display: none;
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 40px auto;
}

.waitlist h2 {
    font-size: 24px;
    color: #333;
}

.waitlist p {
    margin: 10px 0;
    color: #555;
}

.waitlist form {
    margin-top: 20px;
}

.waitlist input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.waitlist button {
    width: 100%;
    padding: 12px;
    background: #5a24be;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s;
}

.waitlist button:hover {
    background: #4a1cae;
}

@media (max-width: 768px) {
    .demo-section {
        text-align: center; /* Centers all text and elements */
        padding: 20px;
    }

    .demo-container {
        width: 100%; /* Takes full width */
        max-width: 360px; /* Prevents it from being too wide */
        margin: 0 auto; /* Centers the container */
        overflow: hidden; /* Ensures no extra scrolling */
    }

    .demo-container iframe {
        width: 100%; /* Makes the iframe responsive */
        height: 400px; /* Adjust height for better viewability */
        border-radius: 10px; /* Optional: Adds smooth corners */
        border: none;
    }

    .tooltip-btn {
        display: block;
        margin: 15px auto; /* Centers button with spacing */
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 8px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
    }

    .tooltip-btn:hover {
        background-color: #0056b3;
    }
}


/* ============================= */
/* DEMO SECTION */
/* ============================= */
.demo-section {
    text-align: center;
    padding: 60px 20px;
    background: #f8f8f8;
}

.demo-container {
    width: 90%;
    max-width: 600px;
    height: 500px;
    margin: 20px auto;
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 10px;
}

iframe {
    width: 100%;
    height: 100%;
}

/* DEMO CONTROLS */
.demo-controls {
    margin-top: 15px;
}

.demo-controls button {
    background: #5a24be;
    color: white;
    border: none;
    padding: 10px 15px;
    margin: 10px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    transition: 0.3s ease-in-out;
}

.demo-controls button:hover {
    background: #7a41d6;
}

.pulse {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.doctor-signup {
    background: linear-gradient(to right, #e0f7ff, #ffffff);
    padding: 60px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeIn 1s ease-in-out;
}

.signup-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    align-items: center;
    justify-content: center;
}

.signup-content {
    flex: 1;
    padding: 20px;
    text-align: left;
}

.signup-content h2 {
    font-size: 28px;
    color: #003366;
    margin-bottom: 10px;
}

.signup-content p {
    font-size: 18px;
    color: #555;
    margin-bottom: 20px;
}

.trust-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.badge {
    background: #5a24be;
    color: white;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge i {
    font-size: 18px;
}


.signup-btn {
    background: #40BE24;
    color: white;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 6px rgba(0, 123, 255, 0.3);
}

.signup-btn:hover {
    background: #0056b3;
    box-shadow: 0px 6px 10px rgba(0, 86, 179, 0.4);
}

.signup-image img {
    width: 100%; /* Make image responsive */
    max-width: 500px; /* Increase max size */
    height: auto;
    border-radius: 15px; /* Curved edges */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle depth */
    transition: transform 0.3s ease-in-out; /* Smooth hover effect */
}

.signup-image img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Adjusting Layout */
.signup-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1100px;
    margin: auto;
    padding: 60px 20px;
}

.signup-content {
    flex: 1;
    text-align: left;
}

.signup-image {
    flex: 1;
    display: flex;
    justify-content: center;
}


/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styling */
@media (max-width: 768px) {
    .signup-container {
        flex-direction: column;
        text-align: center;
    }

    .signup-content h2 {
        font-size: 22px;
    }

    .signup-content p {
        font-size: 14px;
    }

    .badge {
        font-size: 12px;
        padding: 6px 10px;
    }

    .signup-btn {
        font-size: 16px;
        padding: 10px 18px;
    }

    .signup-image img {
        max-width: 80%;
    }
}



/* ============================= */
/* FOOTER */
/* ============================= */
footer {
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: #666;
}

/* ============================= */
/* RESPONSIVE DESIGN */
/* ============================= */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 28px;
    }

    .subheader {
        font-size: 16px;
    }

    .waitlist-cta p {
        font-size: 16px;
    }

    .circle {
        width: 40px;
        height: 40px;
    }

    .circle:nth-child(1) { left: -20px; }
    .circle:nth-child(2) { left: 0px; }
    .circle:nth-child(3) { left: 20px; }
    .circle:nth-child(4) { left: 40px; }
}

/* Footer Section Styling */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2rem 1rem;
    background-color: #fff; /* Changed background color to white */
    color: #333; /* Changed text color to dark */
    gap: 1rem; /* Added gap between columns */
}

.footer-column {
    flex: 1 1 200px;
    margin: 0; /* Removed margin to avoid gaps */
    padding: 1rem; /* Added padding for spacing */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

.footer-column h4 {
    cursor: pointer;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #333; /* Changed heading color to dark */
    position: relative;
    text-decoration: none; /* Removed underline */
    border-bottom: none; /* Ensure no border underline */
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
}

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

.footer-column ul li a {
    color: #333; /* Changed link color to dark */
    text-decoration: none; /* Removed underline */
}

.footer-column ul li a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Social Media Icons */
.social-media-icons {
    display: flex;
    gap: 0.5rem;
}

.social-media-icons li {
    list-style: none;
}

.social-media-icons li a img {
    width: 24px;
    height: 24px;
}

/* Newsletter Form */
.footer-column form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-column form input[type="email"] {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.footer-column form button {
    padding: 0.5rem;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.footer-column form button:hover {
    background-color: #555;
}

/* Mobile View */
@media (max-width: 768px) {
    .footer-column ul {
        display: none; /* Initially hide the list */
    }

    /* Dropdown arrow */
    .footer-column h4::after {
        content: '▼';
        position: absolute;
        right: 0;
        font-size: 0.8rem;
        transition: transform 0.3s;
    }

    .footer-column h4.active::after {
        transform: rotate(180deg);
    }

    /* Show the list when the header is active */
    .footer-column h4.active + ul {
        display: block;
    }
}

/* Newsletter Form */
.newsletter-form {
    display: flex;
    align-items: center;
    gap: 0; /* Remove gap between input and button */
}

.newsletter-form input[type="email"] {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px; /* Rounded corners on the left side */
    border-right: none; /* Remove right border */
}

.newsletter-form button {
    padding: 0.5rem 1rem;
    background-color: #333;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 0 4px 4px 0; /* Rounded corners on the right side */
    border-left: none; /* Remove left border */
    cursor: pointer;
}

.newsletter-form button:hover {
    background-color: #555;
}

/* Mobile View */
@media (max-width: 768px) {
    .footer-column ul {
        display: none; /* Initially hide the list */
    }

    /* Dropdown arrow */
    .footer-column h4::after {
        content: '▼';
        position: absolute;
        right: 0;
        font-size: 0.8rem;
        transition: transform 0.3s;
    }

    .footer-column h4.active::after {
        transform: rotate(180deg);
    }

    /* Show the list when the header is active */
    .footer-column h4.active + ul {
        display: block;
    }

    /* Shift the newsletter part up */
    .newsletter-section {
        margin-top: -5rem; /* Negative margin to shift up */
    }
}
    
/* Additional Footer Content Styling */
.additional-footer-content {
    background-color: #f4f4f4; /* Changed background color to light grey */
    color: #333; /* Changed text color to dark */
    padding: 1rem;
    display: flex;
    justify-content: flex-start; /* Align content to the left */
    text-align: left;
}

.additional-footer-content, .footer-bottom {
    display: block !important;
    visibility: visible !important;
}

.additional-footer-content p {
    margin: 0;
}

.additional-footer-content a {
    color: #333; /* Changed link color to dark */
    text-decoration: none; /* Removed underline */
}

.additional-footer-content a:hover {
    text-decoration: underline; /* Underline on hover */
}

.footer-divider {
    border: 0;
    height: 1px;
    background: #ccc; /* Changed divider color to light grey */
    margin: 1rem 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0; /* Reduced padding to shift up */
    margin-top: -1rem; /* Negative margin to shift up */
    font-size: 0.8rem; /* Reduced font size */
}

.footer-bottom .footer-left,
.footer-bottom .footer-right {
    flex: 1;
}

.footer-bottom .footer-left {
    white-space: nowrap; /* Prevent line breaks */
    overflow: visible; /* Hide overflow text */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
}

.footer-bottom .footer-right {
    text-align: right;
}

.footer-bottom .flag {
    width: 20px;
    height: auto;
    margin-left: 0.5rem;
}

/* Mobile View */
@media (max-width: 768px) {
    /* Remove default margin and padding */
    .footer-column {
        margin: 0;
        padding: 0;
    }

    /* Ensure headings have uniform spacing */
    .footer-column h4 {
        display: block;
        position: relative;
        margin: 0;
        padding: 10px;
        cursor: pointer; /* Make it clear it's clickable */
        background-color: #f8f8f8; /* Optional: Add slight background */
        border-bottom: 1px solid #ddd; /* Optional: Separator */
    }

    /* Hide the list by default */
    .footer-column ul {
        display: none;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Dropdown arrow */
    .footer-column h4::after {
        content: '▼';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8rem;
        transition: transform 0.3s;
    }

    /* Rotate arrow when active */
    .footer-column h4.active::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Show list when active */
    .footer-column h4.active + ul {
        display: block;
    }
}

@media (max-width: 768px) {
    /* Ensure visibility of the newsletter section */
    .newsletter-section,
    .additional-footer-content,
    .footer-bottom {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
        position: relative !important;
        overflow: visible !important;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .footer-container {
        padding-bottom: 60px;
    }

    .additional-footer-content {
        margin-top: 30px !important; /* Space it out from other elements */
        padding-bottom: 30px !important;
    }

    .footer-bottom {
        padding-top: 30px !important;
    }

    /* Ensure social media icons are visible */
    .social-media-icons {
        display: flex !important;
        justify-content: center;
        gap: 10px;
        padding: 0;
        list-style: none;
    }

    .social-media-icons li {
        display: inline-block;
    }

    .social-media-icons img {
        width: 30px; /* Keep icons properly sized */
        height: auto;
    }

    /* Ensure additional footer content is visible */
    .additional-footer-content {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }

    /* Make sure footer-bottom content is also visible */
    .footer-bottom {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}