.hero {
    position: relative;
    height: 100vh;
    /* background-image: url('./img/example_bkg.webp'); */
    /* background-image: url('./img/cb_office_reno/lobby3.webp'); */
    background-image: url('./img/projects/large/queen_annes_county_2_large.webp');
    /* background-image: url('./img/projects/large/jw_marriott_lobby.webp'); */
    background-size: cover;
    background-attachment: fixed; /* Parallax effect */
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Image enhancement techniques */
    image-rendering: -webkit-optimize-contrast; /* Safari/Chrome */
    image-rendering: crisp-edges; /* Firefox */
    image-rendering: pixelated; /* Fallback */
    /* Subtle blur to reduce pixelation artifacts and enhance overall quality */
    filter: blur(0.3px) brightness(1.02) contrast(1.05);
    /* Performance optimizations */
    will-change: transform; /* Optimize for animations */
    contain: layout style paint; /* Improve rendering performance */
}

.bottom_hero {
    position: relative;
    height: 75vh;
    background-image: url('./img/projects/large/mt_bank_studio2_large.webp');
    background-size: cover;
    background-attachment: fixed; /* Parallax effect */
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-color);
    z-index: 1;
    pointer-events: none; /* Ensure that the overlay does not interfere with user interactions */
}

.overlay_bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00477abd;
    z-index: 1;
    pointer-events: none; /* Ensure that the overlay does not interfere with user interactions */
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #111; /* Text color */
    opacity: 0; /* Initial opacity */
    animation: fadeIn 1.75s ease-in-out forwards; /* Fade-in animation */
    transform: translateY(0);
    animation: fadeInUp 2s ease-in-out forwards;
    margin-top: -50px;
}

.hero-content p {
    font-size: 1.5rem;
}

@media (max-width: 700px) {
    .heroLogo {
        width:  80%;
    }
}

/* Improve hero behavior on small screens */
@media (max-width: 768px) {
    .hero {
        height: auto;
        min-height: 60vh;
        background-attachment: scroll; /* Disable parallax on mobile for performance */
        padding: 80px 20px 40px; /* Account for fixed header spacing */
        /* Mobile performance optimizations */
        filter: none; /* Remove filters on mobile for better performance */
        image-rendering: auto; /* Use default rendering on mobile */
        will-change: auto; /* Disable will-change on mobile */
    }
}

@media (min-width: 701px) {
    .heroLogo {
        width: 70%;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px); /* Start slightly below */
    }
    100% {
        opacity: 1;
	transform: translateY(0); /* End at normal position */
    }
}

/* Section Styles */
section {
    padding: 100px 60px;
    /* background: linear-gradient(135deg, #489de9, #1987e8); */
    /* background-color: #0b477c; */
    background-color: #333;
    margin-top: 10px 0;
}

/* Reduce section padding and typography on small screens */
@media (max-width: 768px) {
    section {
        padding: 50px 20px;
    }
    section p, section ul {
        font-size: 1.1em;
        line-height: 1.6;
    }
}

/* Enhanced mobile responsiveness */
@media (max-width: 480px) {
    section {
        padding: 40px 15px;
    }
    section p, section ul {
        font-size: 1em;
        line-height: 1.5;
    }
    .hero-content p {
        font-size: 1.2rem;
    }
}

section p, section ul {
    font-size: 1.6em;
    line-height: 1.6;
}

section a {
    color: #00ccff;
}

.background-section {
    position: relative;
    height: 90vh;
    /* background-image: url('./img/example_bkg_3.webp'); */
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden; /* Prevent overflow issues */
}

.content-card {
    position: absolute;
    right: 5%; /* Position the card on the right */
    top: 10%; /* Start above the viewport */
    width: 75vw; /* Adjust width as needed */
    padding: 2rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
    opacity: 0;
    transform: translateX(100%); /* Start off-screen to the right */
    transition: transform 1s ease-in-out;
    display: grid;
    overflow: hidden;
}

/* Media query for smaller screens */
@media (max-width: 750px) {
    .content-card {
        width: 90vw; /* Adjust width for smaller screens */
        right: 2.5%; /* Adjust positioning for smaller screens */
        padding: 1rem; /* Adjust padding for smaller screens */
    }
}

.content-card p {
    font-size: 1rem;
    color: #666;
}

.content-card.animate {
    top: 30%; /* Move down into view */
    opacity: 1;
    transform: translateY(0);
}

.in-view {
    opacity: 1;
    transform: translateX(0); /* Move into view */
}

.animated-section {
    opacity: 0;
    transform: translateY(50px); /* Start position: slightly below */
    transition: all 1s ease-in-out; /* Smooth transition */
}

.animated-section.in-view {
    opacity: 1;
    transform: translateY(0); /* End position: normal */
}

/* Grid Element Base Styling */
.remainingGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    color: white;
}

.gridElementAbout, .gridElementServices {
    background: linear-gradient(135deg, rgba(29, 108, 177, 0.85), rgba(11, 71, 124, 0.85));
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 2; /* Ensure these elements are on top */
    /* Performance optimizations */
    will-change: transform; /* Optimize for hover animations */
    backface-visibility: hidden; /* Prevent flickering during transforms */
}

.gridElementAbout:hover, .gridElementServices:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.gridElementAbout::before, .gridElementServices::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1; /* Lower z-index for the pseudo-element */
}

.gridElementAbout:hover::before, .gridElementServices:hover::before {
    opacity: 1;
}

/* Heading Styling */
.gridElementAbout h2, .gridElementServices h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .gridElementAbout h2, .gridElementServices h2 {
        font-size: 1.6rem;
    }
    .gridElementAbout p, .gridElementServices p {
        font-size: 1rem;
        line-height: 1.6;
    }
    /* Mobile touch optimizations */
    .gridElementAbout, .gridElementServices {
        transition: transform 0.2s ease, box-shadow 0.2s ease; /* Faster transitions for mobile */
        will-change: auto; /* Disable will-change on mobile for better performance */
    }
    .gridElementAbout:hover, .gridElementServices:hover {
        transform: translateY(-8px); /* Smaller hover effect on mobile */
    }
}

/* Paragraph Styling */
.gridElementAbout p, .gridElementServices p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #f1f1f1;
}

/* Learn More Link Styling */
.learn-more-link {
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: #00ccff;
    transition: color 0.3s ease;
    margin-top: 15px;
    cursor: pointer;
    position: relative;
    z-index: 3;
}

.learn-more-link:hover {
    color: #00aaff;
}

.learn-more-link .arrow {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.learn-more-link:hover .arrow {
    transform: translateX(5px);
}

/* Grid Element Animations */
@keyframes fadeInGrid {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.gridElementAbout, .gridElementServices {
    animation: fadeInGrid 1s ease-in-out forwards;
}

.remainingGrid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
    max-height: 300px; /* Optional: cap image height */
    display: block;
    /* Image optimization */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Prevent layout shift during loading */
    aspect-ratio: 16/9;
    background-color: #f0f0f0; /* Placeholder color */
}

/* Form Styles */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
}

form input, form textarea, form select {
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
    /* Mobile form optimizations */
    -webkit-appearance: none; /* Remove default iOS styling */
    appearance: none;
    /* Improve touch targets on mobile */
    min-height: 44px; /* Minimum touch target size */
}

form button {
    padding: 10px;
    font-size: 1em;
    color: #fff;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

form button:hover {
    background-color: #0056b3;
}

.fast-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.fact-item {
    text-align: center;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.fact-item:hover {
    transform: translateY(-10px);
}

.emoji {
    font-size: 2.75rem; /* Adjust emoji size */
    margin-bottom: 10px;
    display: block;
}

.fact-item p {
    font-size: 1.1rem;
    color: #333;
}

/* Container holding all cards */
.flip-card-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    justify-items: center;
    max-width: 1100px; /* Limit container width */
    margin: 0 auto;    /* Center the container */
}

@media (min-width: 600px) {
    .flip-card-container {
      grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets/smaller laptops */
    }
}
  
@media (min-width: 992px) {
    .flip-card-container {
      grid-template-columns: repeat(3, 1fr); /* 3 columns for larger laptops/desktops */
    }
}
  
  /* Basic styling for each flip card */
  .flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px; /* Enables 3D effects */
    transition: transform 0.3s ease; /* Optional scaling effect */

  }

  @media (max-width: 480px) {
    .flip-card {
      width: 100%;
      max-width: 330px;
      height: 180px;
    }
  }

  .flip-card h2 {
    font-size: 1.9rem;
    margin-bottom: 10px;
    color: #0b477c;
  }
  
  /* Optional: Scale up slightly on hover */
  .flip-card:hover {
    transform: scale(1);
  }
  
  /* Inner container for card faces */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Rotate the inner container on hover */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Shared styling for both sides */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  }
  
  /* Front side appearance */
  .flip-card-front {
    background-color: #ffffff;
    color: #000;
  }
  
  /* Back side appearance and rotated by default */
  .flip-card-back {
    background-color: #0b477c;
    color: #fff;
    font-size: 11.5px;
    transform: rotateY(180deg);
    padding: 10px;
  }

  .numbered-circle-list {
    list-style: none;        /* Remove default bullet styling */
    margin: 0;
    padding: 0;
  }
  
  .numbered-circle-list li {
    display: flex;           /* Place the circle and text side by side */
    align-items: flex-start; 
    margin-bottom: 20px;     /* Spacing between items */
  }
  
  .numbered-circle-list .circle {
    min-width: 40px;
    min-height: 40px;
    background-color: #ffffff;
    border: 2px solid #0b477c;   /* Circle border color */
    border-radius: 50%;         /* Make it perfectly round */
    color: #0b477c;             /* Text color for the number */
    font-weight: bold;
    font-size: 20px;
    display: flex;
    justify-content: center;    /* Center the number horizontally */
    align-items: center;        /* Center the number vertically */
    margin-right: 15px;         /* Spacing between circle and text */
  }
  
  .numbered-circle-list .text {
    font-size: 20px;            /* Adjust text size as needed */
    line-height: 1.4;
    max-width: 600px;           /* Optional: constrain width for readability */
    margin-left: 20px;
  }

.responsive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 20px;
    align-items: center; /* Ensures vertical centering of text and image */
}

@media (max-width: 768px) {
    .responsive-grid {
      grid-template-columns: 1fr; /* Stack columns on mobile */
      margin: 0 10px; /* Reduce horizontal margins */
    }
    .image-column img {
      width: 100%; /* Ensure images scale to container width */
    }
}

.image-column {
    display: flex;             /* So we can center the image horizontally if desired */
    justify-content: center;
    align-items: center;       /* Optional if you want vertical centering in the column */
}

.image-column:nth-child(odd) {
    justify-content: flex-start; /* Aligns content to the left */
}

.image-column:nth-child(even) {
    justify-content: flex-end; /* Aligns content to the left */
}

.image-column img {
    width: 100%;
    max-width: 520px;
    height: auto;              /* Maintain aspect ratio */
    display: block;            /* Remove extra bottom spacing for inline images */
    border-radius: 5px;
}

@media (max-width: 768px) {
    .image-column img {
        max-width: 100%;
    }
}

/* Improve image-to-content height harmony on larger screens */
@media (min-width: 992px) {
  .responsive-grid { align-items: stretch; }
  .image-column { height: 100%; }
  .image-column img {
    width: 100%;
    max-width: none;            /* Allow full width of the column */
    max-height: 850px;          /* Cap height so images aren't too tall */
    height: auto;               /* Maintain aspect ratio under cap */
    object-fit: contain;        /* Avoid aggressive cropping */
  }
}

button {
    padding: 10px;
    font-size: 1em;
    color: #fff;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

button:hover {
    background-color: #0056b3;
}

.bottom_hero {
    position: relative;
    height: 75vh;
    background-image: url('./img/projects/large/mt_bank_studio2_large.webp');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
  .bottom_hero {
    height: auto;       /* Let the container expand based on content */
    padding: 40px 20px; /* Add vertical padding to maintain spacing */
    background-attachment: scroll; /* Disable fixed background on mobile */
    /* Mobile performance optimizations */
    filter: none; /* Remove filters on mobile */
    image-rendering: auto;
  }
  
  .hero-content {
    margin-left: 15px;
    margin-right: 15px;
  }
  
  .hero-content h1 {
    font-size: 35px; /* Adjust heading size for smaller screens */
  }
  
  .hero-content p,
  .hero-content button {
    font-size: 18px; /* Adjust text and button size */
  }
}

/* Enhanced mobile responsiveness for very small screens */
@media (max-width: 480px) {
  .bottom_hero {
    padding: 30px 15px;
  }
  
  .hero-content h1 {
    font-size: 28px;
  }
  
  .hero-content p,
  .hero-content button {
    font-size: 16px;
  }
}

.section-heading {
    text-align: left;
    color: #0b477c;
    font-size: 60px;
    margin-bottom: 10px;
  }
  
  @media (max-width: 768px) {
    .section-heading {
      font-size: 36px; /* Adjusted for smaller screens */
    }
  }