.elementor-kit-404{--e-global-color-primary:#33D7FF;--e-global-color-secondary:#111212;--e-global-color-text:#FFFFFF;--e-global-color-accent:#FFFFFF;--e-global-color-d08fa31:#E3E5E7;--e-global-color-d468cb4:#FF3200;--e-global-color-9b6e122:#D1D1D1;--e-global-color-6eadf91:#1A1B1C;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-1db7686-font-family:"Poppins";--e-global-typography-1db7686-font-size:56px;--e-global-typography-1db7686-font-weight:700;--e-global-typography-1db7686-line-height:64px;--e-global-typography-1db7686-letter-spacing:-0.5px;--e-global-typography-b02de15-font-family:"Poppins";--e-global-typography-b02de15-font-size:16px;--e-global-typography-b02de15-font-weight:400;--e-global-typography-b02de15-line-height:26px;--e-global-typography-4b22134-font-family:"Poppins";--e-global-typography-4b22134-font-size:48px;--e-global-typography-4b22134-font-weight:600;--e-global-typography-4b22134-line-height:56px;--e-global-typography-4b22134-letter-spacing:-0.05px;--e-global-typography-1ec3d98-font-family:"Poppins";--e-global-typography-1ec3d98-font-size:36px;--e-global-typography-1ec3d98-font-weight:600;--e-global-typography-1ec3d98-text-transform:uppercase;--e-global-typography-1ec3d98-line-height:44px;--e-global-typography-1ec3d98-letter-spacing:1px;--e-global-typography-201fa72-font-family:"Poppins";--e-global-typography-201fa72-font-size:24px;--e-global-typography-201fa72-font-weight:600;--e-global-typography-201fa72-line-height:32px;--e-global-typography-5174ea3-font-family:"Poppins";--e-global-typography-5174ea3-font-size:22px;--e-global-typography-5174ea3-font-weight:500;--e-global-typography-5174ea3-line-height:32px;--e-global-typography-6fd2482-font-family:"Poppins";--e-global-typography-6fd2482-font-size:36px;--e-global-typography-6fd2482-font-weight:600;--e-global-typography-6fd2482-line-height:44px;background-color:var( --e-global-color-secondary );color:var( --e-global-color-9b6e122 );font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;line-height:26px;letter-spacing:0.2px;}.elementor-kit-404 e-page-transition{background-color:#FFBC7D;}.elementor-kit-404 a{color:var( --e-global-color-primary );font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;line-height:26px;letter-spacing:0.2px;}.elementor-kit-404 h1{color:var( --e-global-color-accent );font-family:"Poppins", Sans-serif;font-size:48px;font-weight:600;line-height:52px;letter-spacing:-0.5px;}.elementor-kit-404 h2{color:var( --e-global-color-accent );font-family:"Poppins", Sans-serif;font-size:42px;font-weight:500;line-height:46.2px;letter-spacing:-1px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-404{--e-global-typography-1db7686-font-size:36px;--e-global-typography-1db7686-line-height:1.1em;--e-global-typography-1db7686-letter-spacing:1px;--e-global-typography-b02de15-font-size:14px;--e-global-typography-b02de15-line-height:1.6em;--e-global-typography-4b22134-font-size:26px;--e-global-typography-4b22134-line-height:1.2em;--e-global-typography-4b22134-letter-spacing:1px;--e-global-typography-1ec3d98-font-size:20px;--e-global-typography-1ec3d98-line-height:1.1em;--e-global-typography-1ec3d98-letter-spacing:0px;--e-global-typography-201fa72-font-size:16px;--e-global-typography-5174ea3-font-size:16px;--e-global-typography-5174ea3-line-height:1.1em;--e-global-typography-6fd2482-font-size:24px;--e-global-typography-6fd2482-line-height:1.2em;--e-global-typography-6fd2482-letter-spacing:1px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   RAMCOM MASTER - COMPLETE GLOBAL BUILD (Jan 07, 2026)
   ============================================================ */

/* --- 1. GLOBAL SITE RESTORE (DARK MODE) --- */
html, body, .elementor-page {
    background-color: #111212 !important;
    color: #ffffff;
}

/* --- 2. SECTION HEADINGS (HORIZONTAL LEAD-IN BAR) --- */
.section-heading .elementor-heading-title {
    display: flex !important;
    align-items: center !important;
    font-family: 'Poppins', sans-serif !important;
}

.section-heading .elementor-heading-title::before {
    content: "" !important;
    width: 64px !important; 
    height: 2px !important;
    background: linear-gradient(90deg, rgba(51, 215, 255, 0) 0%, #33D7ff 100%) !important;
    margin-right: 24px !important;
    flex-shrink: 0 !important;
}

/* --- 3. CARD HEADING (VERTICAL POWER BAR STYLE) --- */
.card-heading .elementor-heading-title {
    display: flex !important;
    align-items: center !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
}

.card-heading .elementor-heading-title::before {
    content: "" !important;
    display: inline-block !important;
    width: 4px !important;
    height: 24px !important;
    background-color: #33D7ff !important;
    margin-right: 12px !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
    box-shadow: 0px 0px 10px rgba(51, 215, 255, 0.5) !important;
}

/* --- 4. NEON BUTTONS & HEADER BUTTONS --- */
.neon-button .elementor-button, 
.header-minimal .elementor-button,
.btn-view-bio .elementor-button {
    background-color: transparent !important;
    border: 2px solid #33D7ff !important;
    color: #33D7ff !important;
    border-radius: 6px !important;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out !important;
}

.neon-button .elementor-button:hover, 
.header-minimal .elementor-button:hover,
.btn-view-bio .elementor-button:hover {
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0px 0px 15px rgba(51, 215, 255, 0.6) !important;
    transform: scale(1.05) !important;
}

/* --- 5. BIO CARD: CONTAINER FIX --- */
.bio-card-square {
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    background-color: transparent !important; 
}

/* --- 6. ICON LIST: THE ATTRIBUTE SWAP (Contact Info) --- */
.card-contact-row .elementor-icon-list-text {
    transition: all 0.3s ease-in-out !important;
    position: relative;
    display: inline-block;
}

.card-contact-row .elementor-icon-list-item:hover .elementor-icon-list-text {
    color: transparent !important;
}

.card-contact-row .elementor-icon-list-item:hover .elementor-icon-list-text::after {
    content: attr(data-hover); 
    position: absolute;
    left: 0;
    top: 0;
    color: #00FFFF !important; 
    white-space: nowrap;
    font-weight: bold;
}

.card-contact-row .elementor-icon-list-item:hover .elementor-icon-list-icon i {
    color: #00FFFF !important;
    transform: scale(1.1);
}

/* --- 7. RAMCOM GLOBAL CARD SYSTEM (.ramcom-card) --- */
.ramcom-card {
    border: 1px solid #252627 !important;
    background-color: #1A1B1C !important;
    border-radius: 8px !important;
    overflow: hidden !important; 
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.ramcom-card:hover {
    border-color: #33D7ff !important; 
    box-shadow: 0px 0px 12px rgba(51, 215, 255, 0.4), 
                0px 15px 35px rgba(0, 0, 0, 0.7) !important;
    transform: scale(1.03) translateY(-5px) !important;
}

.ramcom-card .elementor-widget-image img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.ramcom-card:hover .elementor-widget-image img {
    transform: scale(1.1) !important;
}

/* --- 8. LOGO MARQUEE GLIDE (.logo-glide) --- */
.logo-glide .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

/* --- 9. CONSOLIDATED NAVIGATION SYSTEM --- */

/* Main Menu Items (Top Level) */
.elementor-nav-menu--main .elementor-item {
    text-transform: none !important; 
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Sub-Menus (Dropdowns) - Force Normal Case and Compact Size */
.elementor-nav-menu .sub-menu,
.elementor-nav-menu .sub-menu .elementor-item {
    background-color: #1A1B1C !important;
    text-transform: none !important; 
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    transition: all 0.2s ease-in-out !important;
}

/* --- 10. SUB-MENU INDICATOR & VERTICAL STACK FIX --- */
.elementor-nav-menu .menu-item-has-children > a .sub-arrow {
    transition: none !important;
    fill: #33D7ff !important;
}

/* Force nested sub-menus to stack vertically */
.elementor-nav-menu .sub-menu .sub-menu {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    padding-left: 20px !important;
    border-left: 1px solid #252627 !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Remove side-arrows on nested items */
.elementor-nav-menu .sub-menu .menu-item-has-children > a:after {
    display: none !important;
}

.ramcom-hero-center {
    z-index: 10 !important;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(51, 215, 255, 0.3) !important;
}

/* 1. Set the Side Images to be subtle by default */
.side-image {
    opacity: 0.6;
    filter: grayscale(30%) blur(1px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 2. The Center "Reveal" Animation */
.center-hero {
    z-index: 10 !important;
    transform: scale(1.05); /* Stays slightly larger by default */
    filter: brightness(1.1);
    box-shadow: 0px 0px 30px rgba(51, 215, 255, 0.3); /* Subtle Cyan glow */
    transition: all 0.8s ease-out !important;
}

/* 3. The Bold Interaction: On Hover, the center 'pops' and glows */
.center-hero:hover {
    transform: scale(1.1) translateY(-10px) !important;
    filter: brightness(1.2) !important;
    box-shadow: 0px 15px 50px rgba(51, 215, 255, 0.6) !important;
    border: 2px solid #33D7ff !important;
}

/* --- RAMCOM BUTTON SYSTEM: NO-JUMP VERSION --- */
.av-ultra-btn, .uniform-button {
    /* This forces the WIDGET itself to be a specific size */
    width: 100% !important;
    max-width: 320px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.av-ultra-btn .elementor-button, 
.uniform-button .elementor-button {
    /* This forces the BUTTON inside to fill that widget exactly */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 60px !important; /* Fixed height stops vertical jumping */
    
    background: rgba(17, 18, 18, 0.5) !important;
    border: 1px solid rgba(51, 215, 255, 0.4) !important;
    color: #ffffff !important;
    border-radius: 2px !important;
    transition: all 0.3s ease-in-out !important;
}

/* --- MOBILE STACKING --- */
@media (max-width: 767px) {
    .av-ultra-btn, .uniform-button {
        max-width: 100% !important; /* Fill the screen on mobile */
    }
    .av-ultra-btn .elementor-button, 
    .uniform-button .elementor-button {
        height: 55px !important;
        margin-bottom: 15px !important;
    }
}

/* THE "TECH-REVEAL" HOVER */
.av-ultra-btn .elementor-button:hover {
    background: rgba(51, 215, 255, 0.1) !important;
    color: #33D7ff !important; /* Text switches to Cyan */
    border-color: #33D7ff !important;
    
    /* Dual Glow: Inner and Outer */
    box-shadow: 0px 0px 20px rgba(51, 215, 255, 0.4), 
                inset 0px 0px 10px rgba(51, 215, 255, 0.2) !important;
    
    letter-spacing: 4px !important; /* Text expands slightly on hover */
    transform: translateY(-2px) !important;
}

/* Style for all input fields and textareas */
.elementor-kit-404 input:not([type="submit"]), 
.elementor-kit-404 textarea, 
.elementor-kit-404 select {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Semi-transparent */
    border: 1px solid rgba(51, 215, 255, 0.3) !important; /* Dimmed cyan border */
    color: #ffffff !important;
    transition: all 0.3s ease-in-out !important;
}

/* The Glow Effect when clicking into a field */
.elementor-kit-404 input:focus, 
.elementor-kit-404 textarea:focus, 
.elementor-kit-404 select:focus {
    background-color: rgba(51, 215, 255, 0.05) !important;
    border-color: #33D7ff !important; /* Full brightness cyan */
    outline: none !important;
    box-shadow: 0px 0px 15px rgba(51, 215, 255, 0.4) !important; /* Exterior glow */
}

/* Stylized Placeholder text */
.elementor-kit-404 ::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 14px;
    letter-spacing: 1px;
}

@media (max-width: 767px) {
    /* 1. Remove the lead-in bar on mobile */
    .section-heading .elementor-heading-title::before {
        display: none !important;
    }

    /* 2. Create the 40px Cyan underline under the text */
    .section-heading .elementor-heading-title {
        display: inline-block !important; /* Ensures the background only spans the text */
        background-image: linear-gradient(#33D7ff, #33D7ff) !important;
        background-position: 0 95% !important; /* Positions the line at the bottom */
        background-size: 40px 2px !important; /* Width is 48pxpx, Thickness is 2px */
        background-repeat: no-repeat !important;
        padding-bottom: 8px !important; /* Space between text and line */
    }
}

/* Target only H2s with the custom class */
.tapered-h2 .elementor-heading-title {
    display: inline-block !important;
    position: relative;
    padding-bottom: 10px; /* Space for the line */
}

.tapered-h2 .elementor-heading-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    
    /* THE TAPERED LOOK */
    width: 80px;  /* Total length */
    height: 3px;  /* Thickness at start */
    
    /* Gradient: Solid Cyan to Transparent */
    background: linear-gradient(90deg, 
        #33D7ff 0%, 
        rgba(51, 215, 255, 0.5) 50%, 
        rgba(51, 215, 255, 0) 100%
    );
    
    /* Optional: Slight skew to make it look "sharper" */
    transform: skewX(-15deg); 
}

/* --- COMPACT NAVIGATION OVERRIDE --- */
/* This forces the mobile and desktop sub-menus to obey the lowercase rule */
.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--dropdown .elementor-item a,
.elementor-sub-item {
    text-transform: none !important;
}

/* --- THE "FORCE" OVERRIDE FOR PROJECT TITLES --- */
body .elementor-widget-heading.project-card-title h2.elementor-heading-title {
    font-size: 18px !important;    /* Forces a smaller size */
    line-height: 1.2 !important;
    text-transform: none !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* Ensure the container doesn't squash the text */
.project-card-title .elementor-widget-container {
    padding: 10px !important;
}

/* Hide the Theme's default footer globally */
footer.site-footer, 
#colophon, 
.site-footer-inner {
    display: none !important;
}

@media (max-width: 767px) {
    .av-ultra-btn .elementor-button {
        min-width: 100% !important; /* On mobile, buttons look best at full width */
        margin-bottom: 10px !important; /* Adds space between stacked buttons */
        font-size: 13px !important;
    }
}

/* --- GLOBAL CONTENT ALIGNMENT --- */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important; /* The 'Gutter' for desktop */
    padding-right: 40px !important;
}

/* Mobile Gutter Adjustment */
@media (max-width: 767px) {
    .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 20px !important; /* Thinner gutters for small screens */
        padding-right: 20px !important;
    }
}

/* ============================================================
   RAMCOM SERVICE CARDS (STATIC / NON-GROWING)
   ============================================================ */

/* 1. THE BASE CARD - REMAINS STILL */
.ramcom-service-card {
    background-color: #1A1B1C !important; 
    border: 1px solid #252627 !important;
    border-radius: 4px !important;
    padding: 30px !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* No transform or transition on the card itself to keep it static */
}

/* 2. THE TOP "POWER LINE" (Visual Indicator only) */
.ramcom-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #33D7FF; /* RAMCOM Blue */
    opacity: 0.2; /* Keeps it visible but dim so it feels "connected" */
    transition: opacity 0.3s ease;
}

/* 3. SUBTLE HOVER - ONLY LIGHTS UP, DOES NOT MOVE */
.ramcom-service-card:hover {
    border-color: rgba(51, 215, 255, 0.4) !important;
    /* No transform: translateY here - Card stays perfectly still */
}

.ramcom-service-card:hover::before {
    opacity: 1; /* Line glows brighter when user is looking at the block */
}

/* 4. MOBILE ADJUSTMENTS */
@media (max-width: 767px) {
    .ramcom-service-card {
        padding: 25px !important;
        margin-bottom: 20px !important;
    }
    
    .ramcom-service-card::before {
        opacity: 0.6; /* Higher visibility on mobile since there is no "hover" */
    }
}

/* --- 7. RAMCOM GLOBAL CARD SYSTEM (.ramcom-card) --- */
.ramcom-card {
    /* Starting with a 2px border (transparent) prevents the card from jumping when the blue appears */
    border: 2px solid transparent !important; 
    background-color: #1A1B1C !important;
    border-radius: 8px !important;
    overflow: hidden !important; 
    /* We only transition the border and shadow now, not the size */
    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
    box-sizing: border-box !important;
}

.ramcom-card:hover {
    /* Using your Cyan Blue (#00FFFF) */
    border-color: #00FFFF !important; 
    
    /* Glow effect using your Cyan Blue with low opacity */
    box-shadow: 0px 0px 15px rgba(0, 255, 255, 0.3), 
                0px 15px 35px rgba(0, 0, 0, 0.7) !important;
    
    /* REMOVED: scale(1.03) and translateY(-5px) to keep it static */
    transform: none !important; 
}

/* 7a. Keep the Image Zoom (Optional) */
/* This makes the image inside move, but the card itself stays still */
.ramcom-card .elementor-widget-image img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.ramcom-card:hover .elementor-widget-image img {
    transform: scale(1.08) !important;
}

/* 1. The Base Card (Static State) */
.custom-service-card {
    background-color: #1A1B1C !important; /* Matching your Ramcom dark theme */
    /* We use a 2px transparent border to 'reserve' the space so it doesn't grow on hover */
    border: 2px solid transparent !important; 
    border-radius: 12px !important;           
    padding: 30px;
    box-sizing: border-box !important;
    /* Only transition the border and shadow, NOT the transform/scale */
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden;
}

/* 2. The Hover State (Your Cyan Blue) */
.custom-service-card:hover {
    /* Using your signature Cyan Blue */
    border-color: #00FFFF !important; 
    
    /* Subtle neon glow instead of growing */
    box-shadow: 0px 0px 15px rgba(0, 255, 255, 0.2) !important;
    
    /* Forces the card to stay exactly where it is */
    transform: none !important; 
}

/* 3. Internal Image Zoom (The 'Pro' touch) */
/* The card stays still, but the image inside zooms slightly */
.custom-service-card .elementor-widget-image img {
    transition: transform 0.5s ease !important;
}

.custom-service-card:hover .elementor-widget-image img {
    transform: scale(1.05) !important;
}

/* --- DESKTOP (No Changes) --- */
.client-logo-strip {
    background: #FFFFFF !important; 
    border-radius: 4px !important; 
    padding: 0px 40px !important; 
    margin: -70px auto 40px auto !important; 
    z-index: 100;
    position: relative;
    border-bottom: 4px solid #00FFFF; 
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: center !important; 
    align-items: center;
    height: 130px !important; 
    width: auto !important; 
    max-width: 1250px !important; 
}

.client-logo-strip img {
    height: auto !important;
    max-height: 95px !important; 
    width: auto !important;
    max-width: 250px !important; 
    margin-left: 80px !important; 
    filter: none !important; 
    opacity: 1 !important;
    object-fit: contain !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer;
}

.client-logo-strip img:hover {
    transform: scale(1.1) !important;
    z-index: 10;
}

.client-logo-strip img:first-of-type {
    margin-left: 40px !important; 
}

.strip-label {
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 2.5px !important;
    color: #00FFFF !important; 
    text-transform: uppercase;
    border-right: 2px solid #F0F0F0;
    padding-right: 30px;
    line-height: 1.3;
    min-width: 170px; 
}

/* --- REFINED COMPACT MOBILE --- */
@media (max-width: 767px) {
    .client-logo-strip {
        height: auto !important; 
        padding: 15px 10px !important; /* Thinner top/bottom padding */
        margin: -30px auto 30px auto !important; 
        width: 80% !important; /* Narrower overall box width */
        flex-direction: column; 
        gap: 0 !important;
    }

    .client-logo-strip img {
        margin-left: 0 !important; 
        margin-bottom: 15px !important; /* Tighter vertical spacing */
        
        /* Reduced Logo Sizes for Mobile */
        height: 70px !important;
        max-height: 70px !important;
        max-width: 160px !important;
        
        transform: none !important; 
    }
    
    .client-logo-strip img:last-of-type {
        margin-bottom: 5px !important;
    }

    .strip-label {
        border-right: none !important;
        border-bottom: 1px solid #F0F0F0; /* Thinner divider */
        padding-right: 0 !important;
        padding-bottom: 10px;
        margin-bottom: 15px !important;
        text-align: center;
        width: 100%;
        min-width: 0;
        font-size: 10px !important; /* Smaller text for compact look */
    }
}

/* Add this to your existing CSS block */
[id] {
  scroll-margin-top: 150px; /* Adjust this number to change where the jump lands */
}

html {
  scroll-behavior: smooth !important;
}/* End custom CSS */