/* CSS for responsive design */

/* Make the header transition smoothly when appearing/disappearing */
header {
    transition: transform 0.3s ease-in-out;
}

/* This class will be added by JS to hide the header */
header.header-hidden {
    transform: translateY(-100%);
}

/* Tablet and iPad styles */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet fix: How We Do It animation frame */
    #browser-frame {
        aspect-ratio: 3 / 4;
        top: 9vh;
    }

    #loading-progress-bar-container {
        top: 6vh;
    }

    #summary-text {
        bottom: 5vh;
    }

    /* Tablet fix: Portfolio cards sticky and centered */
    .portfolio-cards-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .card-1 {
        top: 375px;
    }
    .card-2 {
        top: 450px;
    }
    .card-3 {
        top: 525px;
    }
    /* Tablet fix: General typography */
    h1, h2 {
        font-size: 3rem !important;
    }

    .section-gradient-title-wrapper {
        font-size: 3rem !important;
    }

    /* Tablet fix: Hero section */
    #hero h1 {
        font-size: 3.5rem !important;
    }

    /* Tablet fix: Portfolio section */
    .portfolio-images {
        grid-template-columns: 1fr;
    }

    /* Tablet fix: Features section */
    .features-data-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Tablet fix: Contact section */
    .contact-container {
        grid-template-columns: 1fr;
    }
    
    /* Tablet fix: Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    /* Tablet fix: "How We Do It" Animation component sizing */
    #new-wireframe-main-heading {
        height: 200px;
    }

    #main-security-heading {
        font-size: 52px !important;
        height: 200px;
    }

    #hero-subheading-text {
        font-size: 17px;
    }

    #new-wireframe-cta1,
    #new-wireframe-cta2 {
        width: 30%;
        height: 12%;
        font-size: 20px;
    }

    #new-wireframe-cta1 {
        left: calc(50% - 30% - 5px);
        top: 305px;
    }
    
    #new-wireframe-cta2 {
        left: calc(50% + 5px);
        top: 305px;
    }

    #new-wireframe-cards-container {
        width: 100%;
        height: 40%;
    }

    #new-wireframe-card1 h4,
    #new-wireframe-card2 h4 {
        font-size: 20px;
    }

    #new-wireframe-card1 p a,
    #new-wireframe-card2 p a {
        font-size: 14px;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    /* Mobile fix: Hamburger Menu */
    .nav-toggle-label {
        display: block;
        position: absolute;
        top: 35px;
        right: 20px;
        height: 30px;
        width: 40px;
        cursor: pointer;
        z-index: 1001;
    }

    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        display: block;
        background-color: #fff;
        height: 3px;
        width: 100%;
        position: absolute;
        left: 0;
        transition: all 0.3s;
    }

    .nav-toggle-label span::before {
        content: '';
        top: -10px;
    }

    .nav-toggle-label span::after {
        content: '';
        top: 10px;
    }

    .nav-toggle {
        display: none;
    }

    nav ul {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(18, 18, 18, 0.98);
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .nav-toggle:checked ~ ul {
        display: flex;
    }

    .nav-toggle:checked + .nav-toggle-label span {
        background-color: transparent;
    }

    .nav-toggle:checked + .nav-toggle-label span::before {
        transform: rotate(45deg);
        top: 0;
    }

    .nav-toggle:checked + .nav-toggle-label span::after {
        transform: rotate(-45deg);
        top: 0;
    }

    nav ul li {
        margin: 20px 0;
        font-size: 1.5rem;
    }

    /* Mobile fix: General layout and typography */
    body {
        padding-top: 0;
    }

    header {
        position: fixed;
        background-color: transparent;
    }
    
    section {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    h1, h2 {
        font-size: 3.2rem !important;
    }

    .section-gradient-title-wrapper {
        font-size: 3.2rem !important;
        margin-bottom: 60px;
        margin-top: 0;
    }

    /* Mobile fix: Hero section */
    #hero {
        padding: 300px 20px 60px 20px;
        justify-content: start;
        height: calc(100svh + 70px);
    }

    .hero-content {
        padding-top: 0px;
    }

    #hero h1 {
        font-size: 2.8rem !important;
    }

    .hero-dynamic-subheading {
        font-size: 1.5rem;
    }

    .hero-description {
        font-size: 1rem;
        margin-bottom: 75px;
    }

    /* Mobile fix: Portfolio section */
    #portfolio {
        justify-content: flex-start;
        padding-top: 0px;
    }
    .portfolio-card {
        overflow: visible;
        margin-bottom: 0px;
        width: 87%;
    }
    .portfolio-card .client-name {
        font-size: 1.1rem;
    }
    .portfolio-card .card-number-style {
        display: none;
    }
    .portfolio-images {
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
        gap: 15px;
        margin: 0px !important;
    }
    .main-image, .sub-images {
        height: auto;
        grid-column: 1 / -1;
    }
    .sub-images {
        grid-row: 1;
    }
    .main-image {
        grid-row: 2;
    }
    .main-image img, .sub-images img {
        height: auto;
    }
    
    .card-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px 20px;
    }

    .card-number-style {
        align-self: auto;
    }

    .card-1::before {
        content: "01";
        font-size: 1.3rem;
        font-weight: 700;
        text-align: center;
        padding-top: 6px;
        position: absolute;
        top: -40px;
        left: 15px;
        width: 60px;
        height: 34px;
        background-color: #1f1f1f; /* You can change the color */
        z-index: 1;
        border-radius: 15px 15px 0 0;
        border: 1px solid #2a2a2a;
        border-bottom: none;
    }

    .card-1 {
        top: 60px !important;
    }

    .card-2::before {
        content: "02";
        font-size: 1.3rem;
        font-weight: 700;
        text-align: center;
        padding-top: 6px;
        position: absolute;
        top: -40px;
        left: 85px;
        width: 60px;
        height: 34px;
        background-color: #1f1f1f; /* You can change the color */
        z-index: 1;
        border-radius: 15px 15px 0 0;
        border: 1px solid #2a2a2a;
        border-bottom: none;
    }

    .card-2 {
        top: 60px !important;
    }

    .card-3::before {
        content: "03";
        font-size: 1.3rem;
        font-weight: 700;
        text-align: center;
        padding-top: 6px;
        position: absolute;
        top: -40px;
        left: 155px;
        width: 60px;
        height: 34px;
        background-color: #1f1f1f; /* You can change the color */
        z-index: 1;
        border-radius: 15px 15px 0 0;
        border: 1px solid #2a2a2a;
        border-bottom: none;
    }

    .card-3 {
        top: 60px !important;
    }

    /* Mobile fix: Features section */
    #features-data-backed {
        position: static;
        z-index: auto;
        overflow: hidden;
        background-color: #0e0e0e;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0px;
    }

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

    .feature-data-item {
        min-height: auto;
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .features-data-text h2 {
        font-size: 3.2rem !important;
    }

    .feature-data-number {
        font-size: 4rem !important;
    }

    .feature-data-description {
        font-size: 0.8rem !important;
    }
    
    /* Mobile fix: How We Do It section */
    #how-we-do-it {
        display: block;
        padding: 40px 0;
        height: 100vh;
    }

    #how-we-do-it-pinned-content > .container .section-gradient-title-wrapper {
        margin-bottom: 0px;
    }

    #how-we-do-it-pinned-content {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    #how-we-do-it .container {
        flex-shrink: 0;
    }
    
    #loading-progress-bar-container {
        order: 2; /* Position after title */
        position: static; /* Remove absolute positioning */
        transform: none;
        left: auto;
        top: auto;
        bottom: auto;
        width: 80%;
        margin: 20px auto; /* Center with margin */
    }

    #browser-frame {
        order: 3; /* Position after progress bar */
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        margin: 1rem auto;
        width: 280px;
        height: 550px;
        flex-shrink: 0; /* Prevent phone from shrinking */
    }
    
    #summary-text {
        order: 4; /* Position at the bottom */
        position: static; /* Remove absolute positioning */
        transform: none;
        left: auto;
        top: auto;
        bottom: auto;
        width: 90%;
        margin: 20px auto;
        text-align: center;
        font-size: 1.5rem;
    }

    /* Mobile phone frame (replaces browser frame) */
    #browser-frame {
        margin: 1rem auto; /* Keep simplified margin */
        border-radius: 30px;
        background-color: #222;
        box-shadow: 0 15px 25px rgba(0,0,0,0.3);
        padding: 10px;
        border: none;
        overflow: hidden;
        aspect-ratio: auto;
    }

    /* Mobile phone notch */
    #browser-frame::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 25px;
        background-color: #222;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        z-index: 2;
    }

    /* Mobile phone screen */
    #browser-content {
        border-radius: 20px;
        height: 100%;
        padding: 10px;
        background-color: #1B1B1B; /* Changed background color */
    }

    /* Hide browser bar in mobile view */
    #browser-bar {
        display: none;
    }

    /* Adjust wireframe elements for mobile layout */
    .new-wireframe-block {
        position: absolute;
        background-color: rgba(136, 136, 136, 0.1);
    }

    /* Nav wireframe - mobile style */
    #new-wireframe-nav {
        height: 40px;
        top: 10px;
        padding: 0 15px; /* Adjust padding */
        border-radius: 8px; /* Match hero section wireframe */
        justify-content: space-between; /* Align logo and hamburger */
    }

    /* Hide desktop nav links on mobile */
    #new-wireframe-nav .nav-links {
        display: none;
    }

    #nav-logo {
        width: 25px;
        height: 25px;
    }

    /* Hamburger Menu in Animation */
    #mobile-nav-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 24px;
        height: 20px;
    }

    #mobile-nav-hamburger span {
        width: 100%;
        height: 2px;
        background-color: #888;
    }

    /* Hero wireframe - mobile style */
    #new-wireframe-hero-area {
        top: 60px;
        height: 410px;
        border-radius: 8px;
    }

    /* Main heading wireframe - mobile style */
    #new-wireframe-main-heading {
        width: 90%;
        left: 5%;
        height: 130px; /* Increased height */
        top: 20px;
        border-radius: 0; /* Remove rounded corners */
    }

    #main-security-heading {
        font-size: 2.5rem; /* Increased font size */
        font-weight: 700;
        height: 100%;
        width: 90%;
        line-height: 1.2;
    }

    #main-security-heading-text {
        text-align: center;
        font-size: 2.2rem;
        color: rgb(201, 209, 217);
    }

    /* Subheading wireframe - mobile style */
    #new-wireframe-subheading {
        position: absolute;
        width: 70%;
        height: 80px;
        top: 180px; /* Position below heading */
        left: 15%;
        border-radius: 0; /* Remove rounded corners */
    }

    #hero-subheading-text {
        font-size: 1rem;
    }

    /* CTA wireframes - mobile style */
    #new-wireframe-cta1, #new-wireframe-cta2 {
        width: 90%;
        height: 40px;
        left: 5%;
        border-radius: 0; /* Make them square initially */
    }

    #new-wireframe-cta1 {
        top: 290px;
    }

    #new-wireframe-cta2 {
        top: 340px;
    }
    
    /* Final button styles to match desktop */
    #new-wireframe-cta1.final-style {
        background-color: #238636;
        border-color: #2ea043;
        color: white;
        top: 300px !important;
    }
    
    #new-wireframe-cta2.final-style {
        background-color: transparent;
        border: 1px solid rgb(48, 54, 61);
        color: #58a6ff;
        top: 350px !important;
    }

    #cta-demo-text, #cta-plans-text {
        font-size: 14px;
    }

    /* Cards container - mobile style */
    #new-wireframe-cards-container {
        display: none; /* Hide cards section entirely on mobile */
    }

    /* Card wireframes - mobile style */
    #new-wireframe-card1, #new-wireframe-card2 {
        position: relative;
        width: 100%;
        height: 80px;
        margin-bottom: 10px;
        border-radius: 0; /* Remove rounded corners */
    }

    .wireframe-text-placeholder.header {
        width: 70%;
        height: 15px;
        margin-top: 15px;
    }

    .wireframe-text-placeholder.paragraph {
        width: 85%;
        height: 15px;
        margin-top: 15px;
    }

    #new-wireframe-card1 h4, #new-wireframe-card2 h4 {
        font-size: 14px;
    }

    #new-wireframe-card1 p a, #new-wireframe-card2 p a {
        font-size: 12px;
    }

    /* Mobile fix: Contact section */
    .contact-container {
        grid-template-columns: 1fr;
    }

    .form-group.half {
        flex: 0 0 100%;
    }

    /* Mobile fix: Footer */
    footer {
        min-height: auto;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom .container {
        flex-direction: column;
        gap: 15px;
    }

    /* Ensure images scale correctly inside containers */
    .main-image img, .sub-images img {
        height: auto;
    }

    .sub-image-desktop {
        display: none;
    }

    .sub-image-mobile {
        display: block;
    }
    
    .card-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .card-number-style {
        align-self: auto; /* Reset alignment */
    }

    /* Mobile fix: Clickable card anchor */
    .card-anchor {
        display: block;
        position: absolute;
        top: -40px; /* Match pseudo-element */
        width: 60px; /* Match pseudo-element */
        height: 34px; /* Match pseudo-element */
        z-index: 10;
        -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
        border-radius: 15px 15px 0 0; /* Match pseudo-element */
        /* background-color: rgba(255, 0, 0, 0.2); */ /* Uncomment for debugging visibility */
    }

    /* Position each anchor individually */
    .card-1 .card-anchor {
        left: 15px;
    }

    .card-2 .card-anchor {
        left: 85px;
    }

    .card-3 .card-anchor {
        left: 155px;
    }

    /* Mobile fix: Features section */
    #features-data-backed {
        position: static;
        z-index: auto;
        overflow: hidden;
        /* background-color: rgba(255, 0, 0, 0.2); */ /* Uncomment for debugging visibility */
    }

    /* Mobile Browser URL Bar */
    #mobile-browser-bar {
        display: flex;
        align-items: center;
        padding: 0 5px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 1; /* Above other content */
        background-color: #3a3a3a;
    }

    .mobile-nav-buttons {
        display: flex;
        align-items: center;
    }

    .mobile-nav-button {
        color: #a0a0a0;
        font-size: 16px;
        margin: 0 5px;
        cursor: default;
        margin-bottom: -5px;
    }
    
    .mobile-reload-button {
        background: none;
        border: none;
        padding: 0;
        margin-left: auto; /* Pushes to the end */
    }

    .mobile-url-container {
        background-color: #222;
        padding: 2px 10px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        flex-grow: 1;
        margin: 7px 8px;
        overflow: hidden;
    }

    #mobile-url-lock-icon {
        color: #a0a0a0;
        margin-right: 8px;
        font-size: 14px;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    #mobile-url-text {
        font-family: 'Arial', sans-serif;
        font-size: 14px;
        color: #f0f0f0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}