/* --- START: General Sitewide Factors --- */
.page-body { background-color: #121212; color: #f22c1f; }
html.has-scroll-smooth { overflow: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0; }

/* --- END: General Sitewide Factors --- */

/* --- START: General Hero Styles & Animations --- */
.area-banner { padding-top: 10vh; }
@keyframes bobbing-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
.glyph-arrow-down { animation: bobbing-arrow 1.8s ease-in-out infinite; }
/* --- END: General Hero Styles & Animations --- */

/* --- START: Desktop & Mobile Layout Visibility --- */
/* By default, hide the desktop hero and show the mobile-related elements. */
.area-banner { display: none; }
.area-banner-vertical { display: flex; }
.handset-topbar { display: flex; }

/* On desktop, use a MORE SPECIFIC SELECTOR (body .area-banner) to override the Webflow CSS */
@media screen and (min-width: 992px) {
    .page-body .area-banner { display: block; }
    .area-banner-vertical, .handset-topbar, .handset-menu-screen { display: none !important; }
}
/* --- END: Layout Visibility --- */

/* --- START: Browser UI & Tab Pane Styles (Desktop Only) --- */
@media screen and (min-width: 992px) {
    .banner-visual-box { max-width: 1100px; margin-left: auto; margin-right: auto; }
    .browser-chrome-header { position: relative; height: 76px; padding: 0; }
    .browser-tab-area { position: absolute; bottom: 38px; left: 0; right: 0; display: flex; align-items: flex-end; padding: 0 0 0 12px; gap: 12px; }
    .url-field-container { position: absolute; bottom: 0; left: 0; right: 0; height: 38px; background-color: #3c3c3c; display: flex; align-items: center; padding: 0 12px; gap: 12px; z-index: 1; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
    .browser-controls-group { flex-shrink: 0; margin-bottom: 9px; }
    .tab-list { display: flex; align-items: flex-end; flex-grow: 1; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; -ms-overflow-style: none; scrollbar-width: none; }
    .tab-list::-webkit-scrollbar { display: none; }
    .tab-list-item { position: relative; overflow: hidden; flex-basis: 200px; flex-shrink: 0; background-color: #282828; color: #9e9e9e; padding: 8px 0 8px 10px; border-top-left-radius: 6px; border-top-right-radius: 6px; display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; border: 1px solid #f22c1f; border-bottom: none; margin-right: -1px; cursor: pointer; text-decoration: none; transition: background-color 0.2s ease; }
    .tab-list-item:hover { background-color: #3a3a3a; }
    .tab-list-item.is-selected { background-color: #3c3c3c; color: #e8e8e8; z-index: 2; margin-bottom: -1px; padding-bottom: 9px; }
    .tab-list-item span { flex-grow: 1; overflow: hidden; display: block; -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent calc(100% - 30px)); mask-image: linear-gradient(to right, black calc(100% - 40px), transparent calc(100% - 30px)); }
    .nav-item-icon { width: 16px; height: 16px; background-color: #555; border-radius: 2px; flex-shrink: 0; }
    .nav-item-exit-button { position: absolute; top: 0; right: 0; bottom: 0; width: 30px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, rgba(40, 40, 40, 0), #282828 25%); font-size: 16px; line-height: 1; opacity: 0.7; margin-left: 0; }
    .tab-list-item.is-selected .nav-item-exit-button { background: linear-gradient(to right, rgba(60, 60, 60, 0), #3c3c3c 25%); }
    .add-tab-control { color: #b4281e; font-size: 20px; padding: 4px 10px; cursor: pointer; margin-left: 4px; margin-bottom: 3px; }
    .url-nav-cluster { display: flex; gap: 12px; color: #f22c1f; font-size: 18px; }
    .url-display-box { flex-grow: 1; background-color: #202124; height: 28px; border-radius: 14px; display: flex; align-items: center; padding: 0 12px; color: #b4281e; font-size: 14px; font-family: 'Roboto Mono', monospace; }
    .security-glyph { margin-right: 6px; color: #b4281e; }
    .browser-viewport { display: grid; }
    .browser-panel { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 0.4s ease-in-out; }
    .browser-panel.is-selected { opacity: 1; pointer-events: auto; }

}
/* --- END: Browser UI Styles --- */


/* --- START: FINAL WORKING Portfolio Slider Solution --- */

/* 1. CRITICAL: Make the portfolio tab pane an absolutely positioned container. 
   This breaks it out of the parent's padding and allows it to fill the entire card, just like the home tab. */
.browser-viewport .browser-panel[data-tab="3"] {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;      /* Vertically center the content inside the now full-height pane */
    justify-content: center;
    padding: 0 !important;      /* Remove any residual padding */
}

/* 2. The wrapper now sits inside this full-width container and controls the content's spacing. */
.portfolio-content-wrapper {
    width: 100%;
    position: relative; /* This is the positioning parent for the arrows. */
}

.portfolio-slider {
    width: 100%;
}

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

.slider-track {
    display: flex;
    /* Width is now set by JavaScript */
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 3. Each slide has padding to create space between the image and the arrows. */
.slide {
    /* Flex and width are now set by JavaScript */
    padding: 0 6vw; /* Horizontal padding so the image doesn't touch the arrows. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.slide-image {
    width: 100%; /* The image now fills the padded slide area. */
    height: auto;
    max-height: 45vh; /* Control the max image height */
    object-fit: contain;
    border-radius: 12px;
    display: block;
}

.slide-description {
    padding-top: 30px;
    max-width: 650px; /* Constrain text width for readability */
    min-height: 10vh; /* Reserve space for text to prevent layout shifts */
}

.slide-description p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #b4281e;
    margin: 0;
    text-align: center;
}

/* 4. Arrows are positioned relative to the wrapper, on the far edges. */
.slider-arrow {
    position: absolute;
    top: 22.5vh; /* Positioned relative to the image's vertical center (half of max-height) */
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(26, 26, 26, 0.7);
    border: 1px solid #3c3c3c;
    color: #f22c1f;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.3s ease;
}

.slider-arrow:hover {
    background-color: rgba(40, 40, 40, 0.9);
}

.slider-arrow.prev {
    left: 20px;
}

.slider-arrow.next {
    right: 20px;
}

.slider-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}
/* --- END: FINAL WORKING Portfolio Slider Solution --- */


/* --- START: Mobile-Specific Styles --- */
@media screen and (max-width: 991px) {
    .handset-topbar { justify-content: space-around; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 55px; background-color: #1a1a1a; border-bottom: 1px solid #3c3c3c; z-index: 100; }
    .handset-nav-item { text-decoration: none; color: #b4281e; font-size: 14px; font-weight: 500; padding: 0 10px; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
    .handset-nav-item.is-selected { color: #f22c1f; border-bottom-color: #f22c1f; }
    .area-banner-vertical { justify-content: center; align-items: center; padding: calc(55px + 15vh) 5vw 10vh; min-height: 50vh; text-align: center; flex-direction: column; }
    .banner-vertical-content { max-width: 600px; }
    .heading-main-banner.vertical-mode { font-size: 10vw; line-height: 1.1; }
    .copy-vertical-subtitle { margin-top: 20px; font-size: 4vw; line-height: 1.5; color: #f22c1f; }
}
@media screen and (max-width: 478px) {
    .page-end-legal-box { flex-direction: column; gap: 8px; align-items: center; text-align: center; }
    .handset-nav-item { font-size: 13px; }
}
/* --- END: Mobile-Specific Styles --- */

/* --- START: Global Styles (Loading, Projects, etc.) --- */
.preloader-veil { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; background-color: #121212; }
.area-portfolio-item { padding: 10vh 5vw; display: flex; justify-content: center; }
.portfolio-item-wrapper { max-width: 900px; width: 100%; }
.portfolio-item-visual { width: 100%; height: auto; border-radius: 12px; margin-bottom: 25px; }
.portfolio-item-description h2 { font-size: 2.5rem; margin-bottom: 10px; }
.portfolio-item-description p { font-size: 1.1rem; line-height: 1.6; color: #b4281e; }
.reveal-on-view { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal-on-view.is-visible { opacity: 1; transform: translateY(0); }
/* --- END: Global Styles --- */


/* Ensure the parent (.browser-viewport) is positioned for absolute children */
.browser-viewport {
  position: relative; /* CRUCIAL: Must be set for .tab-image-background-layer to position correctly */
}






/* style.css NEW BLOCK: Force small text to the bottom-right corner */
.banner-details-layout {
    position: absolute !important; /* Pin relative to the .browser-panel / .banner-copy-container */
    bottom: 9.5vw !important;       /* Space from the bottom */
    /* Panel only fills grid column 1 of .browser-viewport (1fr 1fr, 32px gap), so frame centre = 100% + gap/2 */
    left: calc(100% + 16px + 36px) !important;
    /* Frame's right edge = panel right + 100% + gap; keep the original 6vw inset from it */
    right: calc(-100% - 32px + 6vw) !important;
    width: auto !important;
    height: auto !important;
    text-align: right !important;
    display: block !important;
}
@media screen and (min-width: 1440px) {
    /* webflow.css widens the column gap to 64px here */
    .banner-details-layout {
        left: calc(100% + 32px + 36px) !important;
        right: calc(-100% - 64px + 6vw) !important;
    }
}
.banner-details-layout .copy-banner-details {
    text-align: right !important;
}


/* --- START: Final Hero Solution (Correct Height & Layering) --- */

/* 1. Keep the frame the same height when switching panels. */
.browser-frame-core > .browser-viewport {
    padding: 0 !important;
    min-height: 75vh;
}

/* 2. Make the home pane a positioning context for its background. */
.browser-viewport .browser-panel.is-selected[data-tab="1"] {
    position: relative;
}

/* 3. The background layer, which correctly fills the restored height. */
.banner-image-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    background-image: url('Screenshot 2025-10-13 at 2.51.38 PM.png');
    background-position: right top;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

/* 4. Ensure text content sits on top and re-apply necessary padding. */
.banner-copy-container,
.banner-details-layout {
    position: relative;
    z-index: 2;
}

/* 5. Re-apply the original top and left padding ONLY to the main text block */
.banner-copy-container {
    padding-top: 80px;
    padding-left: 56px;
}

/* --- END: Final Hero Solution (Correct Height & Layering) --- */


/* --- START: Enhance Small Hero Text Effects --- */

.copy-banner-details {
    /* This multi-layered shadow mimics the large text's glow effect,
       but is scaled down to be appropriate for the smaller font size. */
    text-shadow: 0 2px 5px #0057ff26, 
                 0 -2px 5px #ff5a001a, 
                 0 -2px 12px rgba(242, 44, 31, 0.3);

    /* OPTIONAL: To make the white even more intense, uncomment the line below */
    /* color: #f22c1f; */
}

/* --- END: Enhance Small Hero Text Effects --- */


/* --- START: Special Tab Buttons --- */

/* Target our new buttons and override the default tab styles */
.icon-link-tab {
    flex-basis: auto;       /* Do not force a 200px width */
    flex-shrink: 0;         /* Prevent the button from shrinking */
    width: 36px;            /* Set a fixed square width */
    height: 36px;           /* Set a fixed square height */
    padding: 8px;           /* Apply equal padding on all sides */
    margin-bottom: -1px;    /* Align with the bottom of the address bar */
}

/* Ensure the icon placeholder fills the entire button */
.icon-link-tab .nav-item-icon {
    width: 100%;
    height: 100%;
    background-color: transparent; /* Remove the default gray color */
    background-size: cover;        /* Make the image cover the area */
    background-position: center;   /* Center the image */
}

/* --- Set the images for your two buttons --- */

/* --- START: Special Tab Buttons --- */

/* Target our new buttons and override the default tab styles */
.icon-link-tab {
    flex-basis: auto;       /* Do not force a 200px width */
    flex-shrink: 0;         /* Prevent the button from shrinking */
    width: 36px;            /* Set a fixed square width */
    height: 36px;           /* Set a fixed square height */
    padding: 8px;           /* Apply equal padding on all sides */
    margin-bottom: -1px;    /* Align with the bottom of the address bar */
}

/* Ensure the icon placeholder fills the entire button */
.icon-link-tab .nav-item-icon {
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-size: contain;      /* Changed from cover to contain to prevent cropping */
    background-position: center;
    background-repeat: no-repeat;  /* Explicitly prevent repeating */
}

/* --- Set the images for your two buttons --- */

/* Style the FIRST special button */
.icon-link-tab:nth-of-type(2) .nav-item-icon {
    /* Replace this URL with the path to your first image */
    background-image: url('/images/linkedin.png') !important;
}

/* Style the SECOND special button */
/* .icon-link-tab:nth-of-type(3) .nav-item-icon { */
    /* Replace this URL with the path to your second image */
    /* background-image: url('https://placehold.co/24x24/e8e8e8/282828?text=2') !important;
} */

/* --- END: Special Tab Buttons --- */


/* --- START: Animated Gradient Border --- */

/* 1. Prepare the outline container to hold the animated gradient. */
.browser-frame-edge {
    position: relative; /* Necessary for positioning the pseudo-element */
    overflow: hidden;   /* Keeps the spinning gradient contained */

    /* We make the original outline transparent, as the effect will replace it. */
    outline-color: transparent !important; 
}

/* 2. Create the animated gradient layer using a ::before pseudo-element. */
.browser-frame-edge::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%; /* Larger than the container to ensure the gradient covers the edges when spinning */
    height: 150%;
    z-index: 1; /* Sits below the main window content */

    /* The conic-gradient creates a "spotlight" that we can rotate.
       It fades from a soft white to fully transparent. */
    background-image: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 70%,
        rgb(255, 9, 0, 0.4) 75%,
        transparent 100%
    );

    /* Link the element to our 'chase' animation */
    animation: chase 8s linear infinite;
}

/* 3. Ensure the main content sits on top, creating the "border" effect. */
.browser-frame-core {
    position: relative;
    z-index: 2; /* Sits on top of the ::before pseudo-element */
    background-color: #101010; /* ADD THIS LINE to mask the gradient */
}

/* 4. Define the animation keyframes. */
@keyframes chase {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* --- END: Animated Gradient Border --- */

/* --- START: Project Section Background Logo --- */

/* 1. Prepare the section to act as a container for the positioned logo. */
.area-portfolio-item {
    position: relative; /* This is crucial for positioning the logo inside it */
    overflow: hidden;   /* Ensures the oversized logo doesn't spill out */
}

/* 2. Style the new background logo layer. */
.work-backdrop-emblem {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* Sits behind the project content but above the page background */

    /* Your logo image */
    background-image: url('/images/bg-logo.png');

    /* Sizing and Positioning */
    background-size: 90%;          /* Set to 125% of the section's width */
    background-position: center;    /* Center the image horizontally and vertically */
    background-repeat: no-repeat;   /* Prevent the image from tiling */

    /* Makes the logo subtle so it doesn't overpower the text. Adjust as needed. */
    opacity: 0.5;
    /* make the layer invisible to mouse clicks */
    pointer-events: none;
    
}

/* 3. Ensure the main project content sits on top of the logo. */
.portfolio-item-wrapper {
    position: relative; /* Necessary to apply z-index */
    z-index: 2;         /* Sits on top of the background logo */
}

/* --- END: Project Section Background Logo --- */

.area-brand-buffer {
    position: relative;
    width: 100%;
    height: 40vh; /* Adjust this value to increase or decrease the space */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* --- START: Certifications Tab Styles --- */
.credentials-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 40px 20px;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}

.credential-thumbnail {
    width: calc(25% - 15px);
    height: auto;
    border-radius: 8px;
    border: 1px solid #3c3c3c;
    object-fit: cover;
    flex-shrink: 0;
}
/* --- END: Certifications Tab Styles --- */

/* --- START: Lightbox Styles --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 18, 18, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease-in-out;
}

.lightbox-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transform: scale(0.95);
    transition: transform 0.35s ease-in-out;
}

.lightbox-overlay.visible .lightbox-image {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 45px;
    font-weight: 300;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.lightbox-close:hover {
    opacity: 1;
}

.page-body.lightbox-active {
    overflow: hidden;
}
/* --- END: Lightbox Styles --- */




/*
  Styles for the fixed, partially-visible desktop ads
*/

/* 1. Hide ad containers by default (for mobile) */
.desktop-ad-container {
    display: none;
}

/* 2. Media query to show and style ads only on desktop screens */
@media (min-width: 1024px) { /* Adjust this breakpoint as needed */
    
    .desktop-ad-container {
        display: block;
        position: fixed;
        bottom: 0;
        
        /* Set ad dimensions based on your snippet */
        width: 300px;
        height: 250px;
        
        /* This is the key:
         It moves the container DOWN by 49% of its own height.
         This leaves 51% of the container visible from the bottom.
        */
        transform: translateY(49%);
        
        /* Ensure ads are above most page content */
        z-index: 999;
        
        /* Optional: A background color in case the ad fails to load */
        background-color: #111;
        
        /* Optional: Prevents ad from blocking mouse clicks if ad script fails */
        overflow: hidden;
    }
    
    .desktop-ad-container.ad-left {
        left: 20px; /* Adjust horizontal spacing from edge */
    }
    
    .desktop-ad-container.ad-right {
        right: 20px; /* Adjust horizontal spacing from edge */
    }
}