/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    font-size: medium;
    background-color: black;
    color: white;
}

hr {
    height: 5px;
    background-color: black;
}

/* Navbar Styles */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed; /* Change from sticky to fixed */
    top: 0;
    left: 0;
    right: 0; /* Ensure full width */
    background: black;
    color: teal;
    padding: 0.5em 1.5em; /* Increased horizontal padding */
    z-index: 1000;
    height: 70px; /* Increased from 60px */
    font-family: 'Rye', cursive;
    font-size: large;
}

/* Move logo and Caligo Arts link even closer to the left edge */
.navbar {
    padding-left: 0.1em !important;
}
.logo-container {
    margin-left: -0.5em !important;
}

.leftTitle {
    color: white;
    margin: 0;
    font-size: 2.2em; /* Increased from 1.8em */
    white-space: nowrap;
    padding-left: 0 !important; /* Remove all space between logo and title */
    margin-left: 160px !important; /* Slightly less offset for even closer title */
.hero-row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.hero-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-col--left {
  flex: 2;
  padding-right: 2em;
}
.hero-col--right {
  flex: 1;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .hero-row {
    flex-direction: column;
  }
  .hero-col--left, .hero-col--right {
    flex: unset;
    width: 100%;
    padding-right: 0;
    align-items: stretch;
  }
}
    position: relative;
    z-index: 999; /* Ensure title is above logo if needed */
}

/* Ensure navbar stays at 70px height */
.navbar {
    height: 70px;
    overflow: visible; /* Allow logo to overhang */
}

/* Menu Styles */
.menu {
    margin-left: auto; /* Push menu to the right */
    display: none;
    list-style: none;
    position: relative;
    z-index: 1004;
    padding-right: 0.5em; /* Add a little right padding to prevent cutoff */
    background: transparent;
    justify-content: flex-end; /* Right-align nav links within the menu */
}

.menu {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

.menu li {
    position: relative;
    z-index: 1004;
    text-align: right; /* Right-align text in each nav link */
}

/* Add margin after the last nav link (Request a Quote button) */
.menu li:last-child {
    margin-right: 10px !important;
    margin-left: 10px !important; /* Add equal left spacing for Request a Quote button */
}

.menu li a {
    color: white;
    text-decoration: none;
    padding: 0.5em 1em;
    display: block;
    white-space: nowrap;
}

/* Highlight the hovered item */
.menu li a:hover {
    background: teal; /* Hover color for the currently hovered item */
}

/* Ensure hovering Section 2 doesn't affect its subsections */
.menu li.has-dropdown > a:hover {
    background: black; /* Highlight Section 2 only */
}

/* Prevent subsections from highlighting during scroll */
.menu li.has-dropdown .dropdown li a {
    background: none; /* No background by default for subsections */
}

/* Allow subsections to be highlighted only on hover */
.menu li.has-dropdown .dropdown li a:hover {
    background: black; /* Highlight the hovered subsection */
}

/* Dropdown Menu */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #444;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu li.has-dropdown:hover .dropdown {
    display: block; /* Show the dropdown on hover */
}

.dropdown li a {
    padding: 0.5em 1em;
}

/* Mobile-friendly dropdown */
@media (max-width: 767px) {
    .menu li {
        position: relative;
    }

    .dropdown {
        position: relative;
        top: 0;
        left: 0;
        padding-left: 1em;
    }
}

/* Responsive Design */
.menu-toggle {
    font-size: 1.5rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: block;
    position: absolute;
    right: 1em;
}

.menu.show {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    background: #333;
    width: 200px;
    padding: 1em 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.menu.show li {
    text-align: right;
}

@media (max-width: 1650px) {
    .menu {
        display: none !important;
    }
    .menu-toggle {
        display: block !important;
    }
    .menu.show {
        display: block !important;
        position: absolute;
        top: 100%;
        right: 0;
        background: #333;
        width: 240px;
        padding: 1em 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }
    .menu.show li {
        text-align: right;
    }
}

@media (min-width: 1651px) {
    .menu {
        display: flex !important;
        align-items: center;
        position: relative;
        z-index: 1004;
        padding-right: 0 !important;
        margin-right: 0 !important;
        justify-content: flex-end; /* Ensure right alignment on large screens */
    }
    .menu-toggle {
        display: none !important;
    }
}

/* Remove or override previous 1350px menu rules to avoid conflicts */

@media (max-width: 768px) {
    .navbar {
        height: 50px; /* Increased mobile height */
        padding: 0.5em 1em; /* Reduced padding */
    }

    .logo-container {
        flex-direction: row; /* Keep horizontal layout on mobile */
        align-items: center;
        gap: 0.5rem;
        height: 100%;
        margin-right: 3rem; /* Add margin to prevent overlap with menu button */
    }

    .leftTitle {
        font-size: 2.2em !important; /* Restore default size for tablet/desktop mobile */
        padding-left: 0 !important; /* Remove all space between logo and title */
        margin-left: 160px !important; /* Slightly less offset for even closer title */
    }

    .menu-toggle {
        right: 0.5em; /* Move hamburger menu closer to edge */
    }

    .menu.show {
        right: 0;
        width: 200px;
    }

    .table-row {
        flex-direction: column;
    }
    .left-column, .right-column {
        flex: 1;
        width: 100%;
    }
    .table-cell {
        padding: 0px;
    }
    .title {
        padding-top: 10px;
    }

    main {
        margin-top: 60px; /* Match new mobile navbar height */
    }

    .myUIheadshot {
        max-width: 100%;
        height: auto;
        width: auto; /* Remove fixed width */
    }

    .table-row {
        flex-direction: column;
    }
    
    .table-cell {
        width: 100%;
        padding: 10px 0;
    }

    #section4 .table-cell {
        flex: 1 1 100%;
    }
}

@media (min-width: 768px) {
    .menu {
        display: flex;
        align-items: center;
    }

    .menu-toggle {
        display: none;
    }

    .flex-container {
        display: flex;
        justify-content: space-between; /* Space between columns */
        align-items: center; /* Align items vertically center */
    }
    
    .text-column {
        flex: 1; /* Take up remaining space */
        text-align: left;
    }
    
    .image-column {
        flex: 0 0 auto; /* Take only as much space as needed */
        text-align: right; /* Align image to the right */
    }

    main {
        margin-top: 70px; /* Match new navbar height */
    }
}

/* Optional: Make sure dropdowns work in mobile menu */
@media (max-width: 1200px) {
  .menu li.has-dropdown .dropdown {
    position: static;
    background: #333;
    box-shadow: none;
    display: none;
  }
  .menu li.has-dropdown.open .dropdown {
    display: block;
  }
}

/* Sections */
#section2 {
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  box-sizing: border-box;
  padding: 0; /* slideshow will fill the entire section */
}

/* Offset anchor scrolling so fixed navbar doesn't cover the section title */
/* Make the browser offset anchor scrolling globally for fixed navbar */
html {
  scroll-padding-top: 90px; /* default offset for in-page anchors */
}

/* Also explicitly offset the Services section and its headings */
#section2,
#section2 .services-headings,
#section2 .services-headings h2,
#section2 .services-headings .subtitle {
  scroll-margin-top: 90px; /* navbar height (70px) + buffer */
}

main {
    margin-top: 60px; /* Match navbar height */
}

#section1 {
    font-family: 'Rye', cursive;
    * {
        font-weight: 300; /* Apply a lighter weight to all text */
        -webkit-font-smoothing: antialiased; /* For WebKit browsers */
        -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
    }
}
#section6 {
    font-family: 'Rye', cursive;
    min-height: 90vh;
    * {
        font-weight: 300; /* Apply a lighter weight to all text */
        -webkit-font-smoothing: antialiased; /* For WebKit browsers */
        -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
    }
}

.footer {
    background: black;
    color: turquoise;
}

.navbar {
    padding-right: 0 !important;
}

/* Highlight Active Section */
.menu li.active a {
    background: teal;
    color: white;
}

.menu a.active {
    background: teal;
    color: white;
}

.menu .nav-link {
  transition: background 0.2s, color 0.2s;
}

.centered {
    text-align: center !important;
}

.leftAlign {
    text-align: left;
}

.rightAlign {
    text-align: right;
}

.table-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.table-row {
    display: flex;
    width: 100%;
}

.table-cell {
    flex: 1;
    padding: 10px;
    border: 0px solid #ddd;
    max-width: 100%;
}

.table-cell-left {
    flex: 2;
}

.table-cell-right {
    flex: 1;
}

.fab {
    font-size: 1.3em;
}
.fa-linkedin-square {
    color: rgb(0, 127, 178);
}

.fa-twitter {
    color: rgb(0, 172, 237);
}

.fa-patreon {
    color: rgb(249, 104, 84);
}

.fa-instagram {
    color: rgb(225, 48, 108);
}

.fa-youtube {
    color: rgb(255, 0, 0);
}

.fa-reddit {
    color: rgb(255, 69, 0);
}

.fa-facebook {
    color: rgb(24, 119, 242);
}

.fa-github {
    color: rgb(102, 43, 129);
}

.fa-free-code-camp {
    color: black;
}

.fa-codepen {
    color: black;
}

.fa-unity {
    color: black;
}
/* End Icons Font Awesome */

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: black;
    color: white;
    border: 1px solid green;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.btn:hover {
    background-color: black;
    color: purple;
}

.attention {
    background-color: black;
    color: red;
    margin: auto;
}

.greenFont {
    color: rgb(39, 224, 39);
}

a {
    color: white;
}

a:hover {
    background-color: black;
}

.title {
    text-decoration: underline;
    margin: 0px;
    padding-bottom: 0px;
    font-size: 2.5em;
    font-family: 'Rye', cursive;
    * {
        font-weight: 300; /* Apply a lighter weight to all text */
        -webkit-font-smoothing: antialiased; /* For WebKit browsers */
        -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
    }
}

.subTitle {
    color: white;
}

/* Ensure the list items are indented */
ul {
    list-style-type: disc; /* Use disc bullets */
    margin-left: 20px; /* Indent the list */
    padding-left: 20px; /* Add padding to the left */
}

li {
    margin-bottom: 10px; /* Add some space between list items */
}

.myUIcontainer {
    max-width: 100%;
    margin: 0 auto; /* Center the container horizontally */
    padding: 20px 0px;
}
.myUIheadshot {
    max-width: 100%;
    width: 500px;
    height: auto;
    margin-top: 5px;
}

.leftalign {
    text-align: left;
}

.blackBG {
    background: black;
    color: turquoise;
}

.slideshow-container {
  position: relative;
  max-width: 1200px; /* Increase the max-width */
  margin: auto;
}

.mySlides {
  display: none;
}

.mySlides img {
  max-height: 600px; /* Increase the maximum height for the images */
  width: 100%;
  object-fit: contain; /* Ensure the entire image is visible */
  margin-bottom: 20px; /* Add space between the image and the title */
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 36px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 24px; /* Increase the font size for the titles */
  padding: 8px 12px;
  text-align: center;
  margin-top: 10px; /* Add space between the image and the title */
  position: relative; /* Change position to relative */
  bottom: 0; /* Reset bottom position */
}

.slide-description {
  color: #f2f2f2;
  padding: 8px 12px;
  text-align: center;
  margin-top: 5px; /* Add space between the title and the description */
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.icon {
  max-height: auto !important;
  max-width: 150px !important;
  display: block;
  margin: 0 auto; /* Center the icons */
}

.responsive-table {
  width: 100%;
  text-align: center; /* Center the table content */
  margin-top: 20px; /* Add some space above the table */
}

.responsive-table td {
  padding: 10px; /* Add some padding to the table cells */
}

.product-image {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.myHeadshot {
	display:inline-block;
	width: 300px !important;
	height: auto !important;
	border-radius:50%;
	margin-top:0%;
}

.leftTitle {
    text-align: left;
    margin: 0; /* Remove fixed margin */
    padding-left: 0 !important; /* Remove all space between logo and title */
    margin-left: 160px !important; /* Slightly less offset for even closer title */
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    padding-top: 80px;
    background: black;
    color: white;
    overflow: hidden;
    display: flex;
    align-items: center;
 }

.hero__video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__container, .hero__content {
  position: relative;
  z-index: 0;
}

/* Ensure the actual hero HTML structure used in index.html stacks above the video
   The page uses .flex-container and nested .table-container/.table-row/.hero-col
   so add explicit stacking to those so text/buttons render over the absolute video */
.hero .flex-container,
.hero .table-container,
.hero .table-row,
.hero .hero-col,
.hero .hero__cta,
.hero .hero__title,
.hero .hero__badge {
  position: relative;
  z-index: 2;
}

/* Make sure CTA/button is above video (override any earlier z-index:0) */
.hero .hero__cta { z-index: 3; }

.hero__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}

.hero__content {
    max-width: 600px;
    text-align: left;
}

.hero__badge {
    display: inline-block;
    background: black;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.hero__title {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.gradient-text {
    background: linear-gradient(135deg, #00e676 0%, #00b0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__description {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    background-color: black;
}

/* Update the hero features styles */
.hero__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

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

/* Update feature icon styles */
.feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; /* Slightly larger */
    height: 56px;
    /*background: linear-gradient(135deg, #00e676 0%, #00b0ff 100%);*/
    border-radius: 16px; /* More rounded corners */
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 230, 118, 0.2);
}

.feature__icon i {
    font-size: 24px; /* Larger icons */
    color: white;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

/* Enhanced hover effects */
.feature:hover .feature__icon {
    transform: scale(1.1);
}

.feature:hover .feature__icon i {
    transform: scale(1.1) rotate(5deg);
}

/* Add a subtle glow effect */
.feature__icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature:hover .feature__icon::after {
    opacity: 1;
}

.feature__content {
    flex: 1;
}

.feature__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: white;
}

.feature__text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.line-break {
    margin: 1em 0;
}
.line-break-double {
    margin: 3em 0;
}

/* Add responsive styles */
@media (max-width: 968px) {
    .hero__features {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .feature {
        text-align: left;
        padding: 1.25rem;
    }
}

.hero__features {
    display: grid;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.feature i {
    color: #00e676;
}

.hero__cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    z-index: 0;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.button--primary {
    background: #00e676;
    color: #004d40;
}

.button--primary:hover {
    background: #00c853;
    transform: translateY(-2px);
}

.button--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.button--secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.hero__visual {
    position: relative;
}

.hero__shapes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}

.shape--1 {
    background: #00e676;
    width: 300px;
    height: 300px;
    top: 20%;
    right: 10%;
    opacity: 0.2;
}

.shape--2 {
    background: #00b0ff;
    width: 250px;
    height: 250px;
    bottom: 10%;
    right: 20%;
    opacity: 0.15;
}

.shape--3 {
    background: #004d40;
    width: 200px;
    height: 200px;
    top: 10%;
    right: 30%;
    opacity: 0.1;
}

.floating {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px);
    }
}

/* Responsive Design */
@media (max-width: 968px) {
    .hero__container {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2rem;
        gap: 2rem;
    }

    .hero__content {
        margin: 0 auto;
        text-align: center;
    }

    .hero__features {
        justify-content: center;
    }

    .hero__cta {
        justify-content: center;
    }
}

/* Add or update these image-related styles */

/* General image constraints */
img {
    max-width: 100%;
    height: auto;
}

/* Main logo constraints */
.mainLogo {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Digital Art Studio section specific */
#section4 {
    overflow: hidden; /* Prevent section overflow */
}

#section4 .table-container {
    max-width: 100%;
    margin: 0 auto;
}

#section4 .table-row {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 20px;
}

#section4 .table-cell {
    flex: 1 1 300px; /* Base width of 300px, but allows growing/shrinking */
    min-width: 0; /* Allow shrinking below flex basis */
}

/* Update hero image constraints */
.hero__image img {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

.container50 {
    max-width: 35%;
    margin: 0 auto;
    padding: 20px;
}

@media (max-width: 767px) {
    .container50 {
        max-width: 100%;
    }

    .myHeadshot {
        text-align: center;
    }

    .image-column {
        text-align: center; /* Align image to the right */
    }
}

@media screen and (max-width: 768px) {
    .hero {
        width: 100%;
        padding: 1rem;
        justify-content: center;
    }

    .hero__container {
        width: 100%;
        padding: 0;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero__content {
        width: 100%;
        max-width: 100%;
        padding: 0 1rem;
        text-align: center;
    }

    .hero__features {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }

    .feature {
        width: 100%;
        margin: 0 auto;
    }

    .hero__visual {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .hero__image {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .hero__title {
        font-size: 2.5rem; /* Smaller font size on mobile */
        padding: 0 1rem; /* Add padding to prevent text from touching edges */
    }

    .gradient-text {
        word-break: keep-all; /* Prevent the gradient text from breaking */
        display: inline-block; /* Keep the word together */
    }
}

/* Contact Form Styles */
.contact-form {
  background: rgba(0,0,0,0.7);
  padding: 2rem 2.5rem;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  max-width: 420px;
  margin: 0 auto 2rem auto;
  color: #fff;
  font-family: Arial, sans-serif;
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #00e676;
  letter-spacing: 0.5px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1.2rem;
  border: 1px solid #00b0ff;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
  box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #00e676;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,230,118,0.15);
}

.contact-form .btn {
  width: 100%;
  padding: 0.9rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  background: linear-gradient(90deg, #00e676 0%, #00b0ff 100%);
  color: #222;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  margin-top: 0.5rem;
}

.contact-form .btn:hover {
  background: linear-gradient(90deg, #00b0ff 0%, #00e676 100%);
  color: #fff;
  transform: translateY(-2px) scale(1.03);
}

.contact-form .form-group {
  margin-bottom: 1.2rem;
  text-align: left;
}

.contact-form .form-success {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #00e676;
  margin-top: 1em;
}

/* Contact Section Readability Improvements */
#section6 .SubTitle.leftAlign h3 {
  margin-bottom: 1.2em;
  line-height: 1.7;
  text-align: left;
  color: #e0f7fa;
}
#section6 .SubTitle.leftAlign h2 {
  margin-bottom: 1.2em;
  text-align: left;
}
#section6 .SubTitle.leftAlign {
  margin-bottom: 2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
#section6 .contact-form {
  margin-top: 1.5em;
  margin-bottom: 2em;
}
#section6 .btn {
  margin-top: 1.5em;
}
@media (max-width: 600px) {
  #section6 .SubTitle.leftAlign {
    max-width: 98vw;
    padding-left: 0.2em;
    padding-right: 0.2em;
  }
}

/* Gradient button for hero CTA, matching contact form's Send Message button */
.gradient-btn {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  font-size: 1.1rem;
  font-weight: 700;
  background: linear-gradient(90deg, #00e676 0%, #00b0ff 100%);
  color: #222;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  margin-right: 1rem;
  text-decoration: none;
}
.gradient-btn:hover {
  background: linear-gradient(90deg, #00b0ff 0%, #00e676 100%);
  color: #fff;
  transform: translateY(-2px) scale(1.03);
}

/* Professional CTA subtext styling */
.cta-subtext {
  margin-top: 1.2em;
  font-size: 1.1em;
  color: #aaa;
}

/* Remove button inline styles, ensure consistency */
.btn.gradient-btn {
  font-size: 1.2em;
  padding: 0.8em 2.2em;
}

/* --- Services Overview Section Styling (Mobile-First) --- */
.services-overview {
  padding: 2em 1.5em 1.5em;
  margin: 0 auto;
  max-width: 1600px; /* Prevent extreme stretching on wide screens */
  box-sizing: border-box;
  background: #181818;
  color: #fff;
}
.services-overview .title {
  font-size: 2em;
  margin-bottom: 1.2em;
  letter-spacing: 0.5px;
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  margin: 0 auto;
  max-width: 1400px; /* Slightly larger to fit 4 cards comfortably */
  padding: 0 0.5em; /* Reduced padding since parent has padding */
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5em;
  }
}

.service-card {
  background: #181818;
  border: 1.5px solid #333;
  border-radius: 1.2em;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2em 1.5em 1.5em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 420px;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.18s, box-shadow 0.18s;
  text-align: left;
  width: 100%; /* Ensure card fills grid cell */
}
@media (min-width: 1024px) {
  .service-card {
    min-height: 480px;
    max-width: 100%; /* Let grid control card width */
    margin: 0 auto;
  }
}

.service-card h3 {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 1.3em;
  font-weight: 600;
  color: #fff;
}

.service-card ul {
  padding-left: 1.2em;
  margin: 0;
  color: #ccc;
  font-size: 1em;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.service-card li {
  margin-bottom: 0.2em;
  line-height: 1.5;
}

.service-card:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

/* Slideshow mode: when JS enables .slideshow on the grid, force cards to fill available area */
#section2 {
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

#section2 .services-grid.slideshow {
  position: relative;
  display: block; /* switch from grid to single-area stacking */
  width: 100%;
  max-width: 100%;
  padding: 0; /* we'll let cards control inner padding */
  overflow: hidden; /* Contain child elements */
}

#section2 .services-grid.slideshow .service-card {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  max-width: 100%; /* Ensure it stays within bounds */
  margin: 0 !important;
  border-radius: 0.6em; /* keep a slight radius */
  padding: 2.5em; /* comfortable inner spacing */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* center vertically */
  align-items: flex-start !important; /* keep text left-aligned */
  opacity: 0;
  transition: opacity 0.6s ease-in-out, transform 0.4s ease-in-out;
  box-shadow: none; /* remove floating shadows while full-width */
  background: linear-gradient(180deg, rgba(24,24,24,0.98), rgba(16,16,16,0.98));
  overflow: auto;
}

#section2 .services-grid.slideshow .service-card.active {
  opacity: 1;
  z-index: 5;
  position: relative; /* allow document flow for height calc when active */
}

/* Ensure images scale nicely inside slideshow cards */
#section2 .services-grid.slideshow .service-card img {
  max-width: min(320px, 30%); /* Use smaller of 320px or 30% */
  width: auto;
  height: auto;
  margin: 0 auto 1em;
  display: block;
}

/* Layout tweak: put image and text side-by-side for wide screens */
@media (min-width: 900px) {
  #section2 .services-grid.slideshow .service-card {
    padding-left: 4.5em;
    padding-right: 4.5em;
  }
  #section2 .services-grid.slideshow .service-card .service-title {
    font-size: 2em;
    margin-bottom: 0.6em;
  }
  #section2 .services-grid.slideshow .service-card ul {
    max-width: 65%;
  }
}

/* New: layout for grouped slide (up to 3 cards in a slide) */
#section2 .services-grid.slideshow .service-slide {
  position: absolute;
  inset: 0;
  display: none; /* hide non-active slides to avoid stacking/overlay issues */
  gap: 2em;
  align-items: stretch;
  justify-content: center;
  padding: 2em 3em;
  box-sizing: border-box;
}

#section2 .services-grid.slideshow .service-slide.active {
  display: flex !important; /* show only the active slide */
  z-index: 999;
  visibility: visible;
  pointer-events: auto;
}

#section2 .services-grid.slideshow .service-slide .service-card {
  position: relative; /* cards inside slide are normal-flow */
  width: 50%;
  min-width: 240px;
  margin: 0;
  max-width: 640px;
  height: auto;
  display: flex;
  flex-direction: column;
}

/* Give the slide itself a visible background and ensure text is readable */
/* slide wrapper itself is transparent; inner cards will carry visible backgrounds */
#section2 .services-grid.slideshow .service-slide {
  background: transparent;
  color: #fff;
}

/* Make inner cards visually sit on the slide (transparent background) */
/* inner cards have clear visible backgrounds and spacing when inside a slide */
#section2 .services-grid.slideshow .service-slide .service-card {
  background: #1b1b1b !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  padding: 1.6em !important;
  border-radius: 1em !important;
}

/* Force inner card visibility and readable text color to avoid blank slide */
#section2 .services-grid.slideshow .service-slide .service-card,
#section2 .services-grid.slideshow .service-slide .service-card * {
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
}

/* If slides still appear blank because of absolute-positioned old rules, hide any leftover absolute cards outside slides */
#section2 .services-grid.slideshow > .service-card {
  display: none !important;
}

/* Override single-card slideshow rules for cards placed inside a slide wrapper */
#section2 .services-grid.slideshow .service-slide .service-card {
  position: relative !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  background: #181818 !important; /* keep original card background */
}

@media (max-width: 900px) {
  #section2 .services-grid.slideshow .service-slide {
    flex-direction: column;
    padding: 1.2em;
  }
  #section2 .services-grid.slideshow .service-slide .service-card {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

/* Desktop: 3 cards per slide */
@media (min-width: 1200px) {
  #section2 .services-grid.slideshow .service-slide .service-card {
    width: calc(33.333% - 1.333em);
  }
}

/* Tablet: 2 cards per slide */
@media (min-width: 900px) and (max-width: 1199px) {
  #section2 .services-grid.slideshow .service-slide .service-card {
    width: calc(50% - 1em);
  }
}

/* Height: make slides fill most of the viewport minus header/footer space */
#section2 .services-grid.slideshow {
  min-height: calc(100vh - 160px); /* header + some margins */
}

/* Single-card slide: make the card fill the slide area and center content */
#section2 .services-grid.slideshow .service-slide {
  align-items: center;
  justify-content: center;
  padding: 1.2em 2em;
}

#section2 .services-grid.slideshow .service-slide .service-card {
  width: 100% !important;
  max-width: 1200px;
  min-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2em !important;
}

#section2 .services-grid.slideshow .service-slide .service-card img {
  width: 60%;
  max-height: 50vh;
  object-fit: contain;
  margin-bottom: 1.2em;
}

#section2 .services-grid.slideshow .service-slide .service-card .service-title {
  text-align: center;
}

/* Slideshow pagination dots */
.slideshow-dots {
  display: flex;
  gap: 0.6em;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 1.2em 0 0 0;
  padding: 0.2em 0;
  width: 100%;
  z-index: 1200; /* ensure dots sit above slide content */
  margin-bottom: 1.2em; /* increase bottom breathing room so dots don't touch edge */
}
.slideshow-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}
.slideshow-dot:hover { transform: scale(1.15); background: rgba(255,255,255,0.55); }
.slideshow-dot:focus { outline: 2px solid rgba(0,200,140,0.9); }
.slideshow-dot.active { background: #00e676; transform: scale(1.25); }

/* Slideshow caption shown above the dots */
.slideshow-caption {
  text-align: center;
  color: #e6fff2;
  font-size: 1.05em;
  margin-top: 0.6em;
  margin-bottom: 0.4em;
  opacity: 0.98;
}

/* Ensure the image and title are centered inside the single-card slide */
/* Keep the card content visually centered, but ensure lists remain left-aligned for readability */
#section2 .services-grid.slideshow .service-slide .service-card {
  text-align: center; /* centers title and image */
}
#section2 .services-grid.slideshow .service-slide .service-card img {
  display: block;
  margin: 0 auto 1.2em auto;
}

/* Center the title, but make service lists left-aligned and constrained in width */
#section2 .services-grid.slideshow .service-slide .service-card .service-title {
  text-align: center;
  width: 100%;
}
#section2 .services-grid.slideshow .service-slide .service-card ul {
  text-align: left; /* restore left alignment for list items */
  align-items: flex-start; /* when ul is a flex column, keep items left */
  margin: 0.6em auto 0; /* center the list block horizontally under the image */
  max-width: 720px; /* prevent overly wide list lines */
  padding-left: 1.2em; /* keep bullet indentation */
}
#section2 .services-grid.slideshow .service-slide .service-card li {
  text-align: left;
}

@media (max-width: 900px) {
  #section2 .services-grid.slideshow .service-card img {
    width: 40%;
    max-width: 220px;
    float: none;
    display: block;
    margin: 0 auto 1em auto;
  }
  #section2 .services-grid.slideshow .service-card {
    padding: 1.5em;
    min-height: calc(60vh);
    align-items: center !important;
    text-align: center;
  }
  #section2 .services-grid.slideshow .service-card ul {
    max-width: 100%;
  }
}

/* Reduced motion fallback: don't animate, show normal stacked cards */
@media (prefers-reduced-motion: reduce) {
  #section2 .services-grid.slideshow .service-card {
    transition: none !important;
  }
}

/* --- Store Section Responsive Container Fix --- */
#section3 .table-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 2em auto;
  background: #232323;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  overflow: hidden;
}
#section3 .table-row {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#section3 .table-cell {
  width: 100%;
  padding: 1.2em 1em;
  box-sizing: border-box;
}
#section3 .left-column {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a1a1a;
}
#section3 .right-column {
  background: #232323;
}
#section3 .product-image {
  max-width: 90vw;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
#section3 .leftAlign {
  text-align: left;
}
@media (min-width: 700px) {
  #section3 .table-row {
    flex-direction: row;
  }
  #section3 .table-cell {
    width: 50%;
    padding: 2em 2em;
  }
  #section3 .product-image {
    max-width: 350px;
  }
}
@media (max-width: 500px) {
  #section3 .table-cell {
    padding: 0.7em 0.3em;
  }
  #section3 .product-image {
    max-width: 98vw;
  }
}
#section3 hr {
  border: none;
  border-top: 1px solid #333;
  margin: 1.5em 0;
}

/* --- Services Section White Border Fix --- */
#section2 {
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  box-sizing: border-box;
  padding-bottom: 2em;
}
.services-overview {
  position: relative;
  z-index: 1;
}
.services-grid {
  z-index: 2;
  position: relative;
}
.services-overview::before,
.services-overview::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px solid #333;
  z-index: 0;
}
.services-overview::before {
  top: 0;
}
.services-overview::after {
  bottom: 0;
}
.services-overview {
  background: #181818;
  margin: 0 auto;
  max-width: 1200px;
  border-radius: 0;
  box-shadow: none;
  padding-top: 1.2em;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: calc(100vh - 120px); /* allow the section to occupy most of viewport */
}

/* Make the Section 2 slideshow full-bleed (match the hero/video width) */
#section2 .services-overview {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

/* Allow inner grid and slides to expand full-width */
#section2 .services-overview .services-slideshow-wrap,
#section2 .services-overview .services-grid {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Let cards inside slides use the full available width (but keep reasonable inner padding) */
#section2 .services-overview .service-slide .service-card {
  max-width: none;
  width: 100%;
  padding-left: 3em !important;
  padding-right: 3em !important;
}

/* Style for the details section that follows the slideshow */
#section2-details {
  background: #181818;
  color: #fff;
  padding: 2.2em 1em;
}
#section2-details .why-choose-us-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Make slideshow wrapper stretch to fill section and remove extra white space */
.services-slideshow-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.services-slideshow-wrap .services-headings {
  padding: 0 1.2em 0.6em 1.2em;
  margin-bottom: 0.6em;
}
.services-slideshow-wrap .services-headings .title {
  margin-bottom: 0.2em;
}
.services-slideshow-wrap .services-grid {
  /* ensure the slideshow grid fills the remaining space */
  width: 100%;
  flex: 1 1 auto;
  min-height: calc(100vh - 180px); /* fill viewport minus header and headings */
  padding-bottom: 6.5em; /* more room for pagination dots so they're not clipped */
}

@media (max-width: 900px) {
  .services-slideshow-wrap .services-grid {
    padding-bottom: 9em; /* more space for dots on small screens */
  }
}

/* Remove extra bottom padding inside section so slideshow fills area */
#section2 {
  padding-bottom: 0;
}
@media (max-width: 700px) {
  .services-overview {
    padding-left: 0.2em;
    padding-right: 0.2em;
  }
}

/* Portfolio Section Styles - Matches Services Section Exactly */
.portfolio-overview {
  padding: 2em 1.5em 1.5em;
  margin: 0 auto;
  max-width: 1600px;
  box-sizing: border-box;
  background: #181818;
  color: #fff;
}

.portfolio-overview .title {
  font-size: 2em;
  margin-bottom: 1.2em;
  letter-spacing: 0.5px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0 0.5em;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5em;
  }
}

.portfolio-card {
  background: #181818;
  border: 1.5px solid #333;
  border-radius: 1.2em;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2em 1.5em 1.5em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 420px;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.18s, box-shadow 0.18s;
  text-align: left;
  width: 100%;
  transition: transform 0.18s, box-shadow 0.18s;
  text-align: left;
}
@media (min-width: 1024px) {
  .portfolio-card {
    min-height: 480px;
    max-width: 100%; /* Match services card width */
    margin: 0 auto;
  }
}

.portfolio-card h3 {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 1.3em;
  font-weight: 600;
  color: #fff;
}

.portfolio-card p {
  color: #ccc;
  font-size: 1em;
  flex: 1 1 auto;
  margin: 0;
  line-height: 1.5;
}

.portfolio-image {
  width: 100%;
  max-width: min(320px, 100%);
  height: auto;
  border-radius: 0.7em;
  margin-bottom: 1.2em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  background: #111;
  display: block;
}

.portfolio-card:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

/* --- LOGO OVERHANG AND FIXED SIZE --- */
.logo-container {
    position: relative !important;
    min-width: 180px !important;
    width: auto !important;
    height: 125px !important;
    z-index: 1001 !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important; /* Minimal space between logo and title */
}
.logo {
    position: absolute !important;
    left: 0 !important;
    top: 30px !important;
    width: 150px !important;
    height: 100px !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 150px !important;
    min-height: 100px !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    z-index: 1002 !important;
    pointer-events: none;
}

.leftTitle {
    color: white;
    margin: 0;
    font-size: 2.2em;
    white-space: nowrap;
    padding-left: 0 !important; /* Remove all space between logo and title */
    margin-left: 160px !important; /* Slightly less offset for even closer title */
}

@media (max-width: 1650px) {
    .menu {
        display: none !important;
    }
    .menu-toggle {
        display: block !important;
    }
    .menu.show {
        display: block !important;
        position: absolute;
        top: 100%;
        right: 0;
        background: #333;
        width: 240px;
        padding: 1em 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }
    .menu.show li {
        text-align: right;
    }
}

@media (min-width: 1651px) {
    .menu {
        display: flex !important;
        align-items: center;
        position: relative;
        z-index: 1004;
        padding-right: 0 !important;
        margin-right: 0 !important;
        justify-content: flex-end; /* Ensure right alignment on large screens */
    }
    .menu-toggle {
        display: none !important;
    }
}

/* Prevent flexbox from shrinking logo container at any size */
.navbar, .logo-container {
    flex-shrink: 0 !important;
}

/* --- END LOGO FIX --- */

/* Add a 60px top margin to the .hero section on mobile to prevent the fixed navbar from covering hero content */
@media (max-width: 768px) {
  .hero__container,
  .hero__content {
    margin-top: 20px !important; /* Reduced spacing above hero content for mobile */
  }
  .logo {
    max-height: 98.5px !important;
    min-height: 98.5px !important;
    height: 98.5px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    margin-top: 7px !important;
  }
  .logo-container {
    min-width: 150px !important;
    height: 98.5px !important;
    
  }
  .leftTitle {
    margin-left: 130px !important; /* Move closer to 150px logo on mobile, just to the right */
    padding-left: 0 !important;
  }
}

/* Lightbox Modal Styles */
.lightbox-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: rgba(0,0,0,0.92);
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s;
}
.lightbox-content {
  display: block;
  margin: 4vh auto 0 auto;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 0 32px 8px rgba(0,0,0,0.5);
  background: #222;
  padding: 1.5em;
}
.lightbox-caption {
  color: #fff;
  text-align: center;
  margin-top: 1em;
  font-size: 1.2em;
  font-family: 'Rye', serif;
}
.lightbox-close {
  position: absolute;
  top: 2vh;
  right: 3vw;
  color: #fff;
  font-size: 2.5em;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
  transition: color 0.2s;
}
.lightbox-close:hover {
  color: #ff5252;
}
.lightbox-arrow {
  position: absolute;
  top: 50%;
  color: #fff;
  font-size: 3em;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  z-index: 10001;
  padding: 0 0.2em;
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.lightbox-arrow:hover {
  background: #fff;
  color: #222;
}
.lightbox-prev {
  left: 2vw;
  transform: translateY(-50%);
}
.lightbox-next {
  right: 2vw;
  transform: translateY(-50%);
}
@media (max-width: 600px) {
  .lightbox-content {
    max-width: 98vw;
    max-height: 60vh;
    padding: 0.5em;
  }
  .lightbox-caption {
    font-size: 1em;
  }
  .lightbox-arrow {
    font-size: 2em;
  }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em;
  justify-content: center;
  margin-bottom: 2.2em;
  margin-top: 1.2em;
}

@media (max-width: 600px) {
  .leftTitle {
    font-size: 2em !important;
  }
  .hero__badge {
    margin-top: 40px !important;
  }
}

/* Remove dropdown arrow button styles and dropdown-specific mobile/desktop rules */
.dropdown-arrow-btn {
  display: none !important;
}
.menu .has-dropdown .dropdown,
.menu .has-dropdown .dropdown.show,
.menu li.has-dropdown .dropdown,
.menu li.has-dropdown.open .dropdown {
  display: none !important;
}
.menu .has-dropdown {
  display: block !important;
  flex-direction: initial !important;
  align-items: initial !important;
}
.menu .has-dropdown > .nav-link {
  flex: initial !important;
  text-align: initial !important;
  cursor: pointer;
}

.service-title, .portfolio-title {
  font-size: 1.25em;
  font-weight: bold;
  margin: 0.7em 0 0.5em 0;
  color: inherit;
  text-align: center;
}

.service-feature-label {
  font-weight: bold;
}

.reviews-section {
  padding: 4em 0 3em 0;
  background: #181818;
}
.reviews-section .title {
  color: #fff;
  margin-bottom: 2em;
}
.reviews-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 1em;
}
@media (min-width: 600px) {
  .reviews-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .reviews-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5em;
  }
}
.review-card {
  background: #222;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  padding: 2em 2.2em 1.5em 2.2em;
  color: #fff;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid #333;
}
.review-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
}
.review-stars {
  color: #FFD700;
  font-size: 1.3em;
  margin-bottom: 0.7em;
}
.review-text {
  font-size: 1.08em;
  font-style: italic;
  margin-bottom: 1.1em;
  color: #e0e0e0;
}
.review-author {
  font-weight: 600;
  color: #7fffd4;
  font-size: 1em;
}
@media (max-width: 900px) {
  .reviews-container {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
  .review-card {
    max-width: 95vw;
    min-width: 0;
  }
}

/* -------------------------------------------------------------------------
   FORCE HERO CONTENT ABOVE VIDEO BACKGROUND
   - Keep video background at the very back (z-index:0)
   - Ensure all hero content layers (container, rows, cols, features, CTA)
     are positioned and have a higher stacking context.
   - Use modest z-index values so navbar/logo (which intentionally sit above)
     are not affected.
--------------------------------------------------------------------------- */
.hero__video-bg,
.hero-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  pointer-events: none !important; /* let clicks pass through */
}

/* Give the hero content a higher stacking context than the video */
.hero__container,
.hero__content,
.hero-row,
.hero-col,
.hero__features,
.hero__cta {
  position: relative !important;
  z-index: 5 !important;
}

/* If you have absolutely-positioned child elements inside the hero that
   still appear behind the video, add explicit stacking for them as well */
.hero__visual,
.hero__image,
.feature,
.feature__icon,
.hero__badge,
.hero__title,
.hero__description {
  position: relative !important;
  z-index: 6 !important;
}