/* ===============================
   GLOBAL STYLES
================================ */

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

body{
font-family:'Poppins', sans-serif;
background:#061d1f;
color:white;
overflow-x:hidden;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}




/* ===============================
   PRELOADER
================================ */

#preloader{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#021314;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

.preloader-text{
font-size:4rem;
font-weight:700;
color:#00e6c3;
letter-spacing:4px;
}



/* ===============================
   NAVIGATION BAR
================================ */

.navbar{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 8%;
background:rgba(0,0,0,0.2);
backdrop-filter:blur(10px);
z-index:1000;
}

.logo img{
height:50px;
}

.nav-links{
display:flex;
gap:40px;
}

.nav-links a{
font-weight:500;
font-size:15px;
transition:0.3s;
}

.nav-links a:hover{
color:#00e6c3;
}



/* ===============================
   HAMBURGER MENU
================================ */

.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
}

.hamburger span{
width:25px;
height:3px;
background:white;
margin:4px 0;
}



/* ===============================
   HERO SECTION
================================ */

/* HERO SECTION */

/* ================= HERO SECTION ================= */

.hero{
width:100%;
padding:120px 10% 90px 10%;

background-image:url("hero-bg.jpg"); /* your image */
background-size:cover;
background-position:center;

display:flex;
align-items:center;
position:relative;
}

/* cinematic overlay */
.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0.2));
}

/* hero content */
.hero-content{
position:relative;
max-width:620px;
text-align:left;
}

/* title */
.hero-title{
font-size:52px;
font-weight:800;
line-height:1.1;
margin-bottom:15px;
}

/* tagline */
.hero-tagline{
font-size:20px;
margin-bottom:35px;
opacity:0.9;
}

/* buttons */
.hero-buttons{
display:flex;
gap:18px;
}


/* ===============================
   BUTTONS
================================ */

.btn{
padding:14px 32px;
border-radius:30px;
font-weight:500;
font-size:15px;
transition:0.3s;
margin:10px;
display:inline-block;
}

.primary-btn{
background:#00e6c3;
color:#021314;
}

.primary-btn:hover{
transform:translateY(-3px);
box-shadow:0 0 20px rgba(0,230,195,0.6);
}

.secondary-btn{
border:2px solid #00e6c3;
color:#00e6c3;
}

.secondary-btn:hover{
background:#00e6c3;
color:#021314;
}



/* ===============================
   SERVICES SECTION
================================ */

.services{
padding:120px 10%;
text-align:center;
background:#04191b;
}

.services-title{
font-size:40px;
margin-bottom:60px;
color:#00e6c3;
}



/* SERVICES GRID */

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:40px;
}



/* SERVICE CARD */

.service-card{
background:#062729;
padding:20px;
border-radius:40px 10px 40px 10px;
transition:0.4s;
cursor:pointer;
position:relative;
overflow:hidden;
}

.service-card img{
width:100%;
height:180px;
object-fit:cover;
border-radius:30px 10px 30px 10px;
margin-bottom:15px;
}

.service-card h3{
font-size:18px;
font-weight:500;
}

.service-card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 15px 40px rgba(0,230,195,0.25);
}



/* ===============================
   FOOTER
================================ */

footer{
background:#021314;
padding:60px 10%;
margin-top:80px;
}

.footer-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:40px;
}

.footer-links h3,
.footer-social h3{
margin-bottom:20px;
color:#00e6c3;
}

.footer-links ul li{
margin-bottom:10px;
}

.footer-links a{
opacity:0.8;
transition:0.3s;
}

.footer-links a:hover{
color:#00e6c3;
}

.social-icons{
display:flex;
gap:20px;
}

.social-icons img{
width:24px;
transition:0.3s;
}

.social-icons img:hover{
transform:scale(1.2);
}

copyright{
display:block;
text-align:center;
margin-top:40px;
opacity:0.6;
font-size:14px;
}

/* ===============================
   CONTACT SECTION
================================ */

.contact-section{
padding:100px 10%;
background:#04191b;
text-align:center;
}

.contact-section .section-title{
font-size:42px;
margin-bottom:15px;
color:#00e6c3;
}

.contact-section .section-subtitle{
font-size:18px;
opacity:0.8;
margin-bottom:60px;
}

.contact-container{
display:flex;
justify-content:space-between;
gap:50px;
flex-wrap:wrap;
}

.contact-info{
flex:1;
min-width:300px;
display:flex;
flex-direction:column;
gap:20px;
}

.info-box{
background:#062729;
padding:20px;
border-radius:20px;
display:flex;
align-items:center;
gap:15px;
transition:0.3s;
}

.info-box i{
font-size:20px;
color:#00e6c3;
}

.info-box:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,230,195,0.2);
}

.contact-form{
flex:1;
min-width:300px;
display:flex;
flex-direction:column;
gap:20px;
}

.contact-form input,
.contact-form textarea{
padding:15px 20px;
border-radius:15px;
border:none;
background:#062729;
color:white;
font-size:16px;
outline:none;
transition:0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus{
box-shadow:0 0 15px rgba(0,230,195,0.5);
}

.contact-form textarea{
resize:none;
height:150px;
}

.contact-form button{
padding:14px 32px;
border-radius:30px;
border:none;
background:#00e6c3;
color:#021314;
font-size:16px;
cursor:pointer;
transition:0.3s;
}

.contact-form button:hover{
transform:translateY(-3px);
box-shadow:0 0 20px rgba(0,230,195,0.6);
}

/* ===============================
   CONTACT RESPONSIVE
================================ */

@media (max-width:768px){
.contact-container{
flex-direction:column;
gap:40px;
}
}

/* ===============================
   BLOG HERO SECTION
================================ */

.blog-hero{
padding:120px 10%;
text-align:center;
background:radial-gradient(circle at top,#0a3d40,#021314);
}

.blog-hero .hero-title{
font-size:48px;
color:#00e6c3;
margin-bottom:20px;
}

.blog-hero .hero-tagline{
font-size:20px;
opacity:0.8;
}



/* ===============================
   BLOG GRID SECTION
================================ */

.blog-section{
padding:100px 10%;
background:#04191b;
}

.blog-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:40px;
}

.blog-card{
background:#062729;
border-radius:25px;
overflow:hidden;
transition:0.4s;
cursor:pointer;
display:flex;
flex-direction:column;
}

.blog-card img{
width:100%;
height:180px;
object-fit:cover;
}

.blog-card h3{
font-size:20px;
font-weight:600;
color:#00e6c3;
margin:15px 20px 10px;
}

.blog-card p{
font-size:15px;
opacity:0.8;
margin:0 20px 20px;
flex-grow:1;
}

.blog-card .btn{
margin:0 20px 20px;
align-self:flex-start;
}

.blog-card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 15px 40px rgba(0,230,195,0.25);
}



/* ===============================
   BLOG RESPONSIVE
================================ */

@media (max-width:768px){
.blog-hero .hero-title{
font-size:38px;
}
.blog-hero .hero-tagline{
font-size:17px;
}

.blog-section{
padding:80px 6%;
}

.blog-card img{
height:160px;
}
}

@media (max-width:480px){
.blog-hero .hero-title{
font-size:30px;
}
.blog-hero .hero-tagline{
font-size:16px;
}

.blog-container{
grid-template-columns:1fr;
gap:25px;
}
}

/* ===============================
   ABOUT HERO SECTION
================================ */

.about-hero{
padding:120px 10%;
text-align:center;
background:radial-gradient(circle at top,#0a3d40,#021314);
}

.about-hero .hero-title{
font-size:48px;
color:#00e6c3;
margin-bottom:20px;
}

.about-hero .hero-tagline{
font-size:20px;
opacity:0.8;
}



/* ===============================
   ABOUT CONTENT SECTION
================================ */

.about-content{
padding:100px 10%;
display:flex;
align-items:center;
gap:50px;
flex-wrap:wrap;
background:#04191b;
}

.about-image{
flex:1;
min-width:300px;
border-radius:25px;
overflow:hidden;
}

.about-image img{
width:100%;
height:100%;
object-fit:cover;
transition:0.4s;
}

.about-image img:hover{
transform:scale(1.05);
box-shadow:0 20px 50px rgba(0,230,195,0.2);
}

.about-text{
flex:1;
min-width:300px;
color:white;
}

.about-text h2{
font-size:36px;
color:#00e6c3;
margin-bottom:20px;
}

.about-text p{
font-size:16px;
opacity:0.85;
line-height:1.8;
margin-bottom:20px;
}

.about-text .btn{
margin-top:10px;
}



/* ===============================
   ABOUT RESPONSIVE
================================ */

@media (max-width:1024px){
.about-content{
gap:35px;
}
.about-text h2{
font-size:32px;
}
.about-text p{
font-size:15px;
}
}

@media (max-width:768px){
.about-content{
flex-direction:column;
padding:80px 6%;
gap:40px;
}
.about-text h2{
font-size:28px;
}
.about-text p{
font-size:15px;
}
}

@media (max-width:480px){
.about-hero .hero-title{
font-size:30px;
}
.about-hero .hero-tagline{
font-size:16px;
}
.about-text h2{
font-size:24px;
}
.about-text p{
font-size:14px;
}
}

/* ===============================
   HOMEPAGE HERO WITH BACKGROUND IMAGE
================================ */

.hero {
  position: relative;
  padding: 150px 10%;
  text-align: center;
  background-image: url('Evalife.png'); /* make sure this path is correct */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  z-index: 1;
  overflow: hidden;
}

/* Dark overlay for readability */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35); /* adjust opacity for text visibility */
  z-index: -1;
}

/* Keep text above overlay */
.hero-title,
.hero-tagline,
.hero-buttons {
  position: relative;
  z-index: 2;
}

/* Social Icons - Footer */
.social-icons a {
  color: #ffffff; /* white icons */
  font-size: 22px; /* adjust size */
  margin-right: 18px;
  transition: 0.3s;
}

.social-icons a:hover {
  color: #00e6c3; /* teal glow on hover */
  transform: scale(1.2);
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  width: 65px;
  height: 65px;
  bottom: 40px;
  right: 40px;
  background-color: #25D366; /* WhatsApp green */
  color: white;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.whatsapp-float:hover {
  transform: scale(1.2);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* =========================
   SERVICE CARDS
========================= */
.services-section {
  padding: 100px 10%;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 40px;
  background: #04191b;
}

.service-card {
  background: #062729;
  border-radius: 25px;
  padding: 30px;
  color: #ffffff;
  transition: transform 0.4s, box-shadow 0.4s;
  position: relative;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,230,195,0.25);
}

/* Service icons */
.service-card .service-icon {
  font-size: 40px;
  color: #00e6c3;
  margin-bottom: 15px;
}

/* Headings */
.service-card h2 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #00e6c3;
}

/* Lists */
.service-card ul {
  margin-left: 20px;
  margin-bottom: 15px;
  list-style-type: disc;
  opacity: 0.85;
}

/* Closing CTA */
.about-cta {
  text-align: center;
  padding: 80px 10%;
  background: radial-gradient(circle at top, #0a3d40, #021314);
  color: #00e6c3;
}

.about-cta h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.about-cta p {
  font-size: 18px;
  margin-bottom: 30px;
}

.about-cta .btn {
  padding: 15px 40px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  background: #00e6c3;
  color: #021314;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}

.about-cta .btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 25px rgba(0,230,195,0.5);
  background: #00ffc3;
}

/* Responsive */
@media(max-width:768px){
  .services-section {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* =========================
   GLOBAL STYLES
========================= */

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #04191b;
    color: #ffffff;
    overflow-x: hidden;
}

/* =========================
   ABOUT PAGE WRAPPER
========================= */
.about-page-wrapper {
    position: relative;
    min-height: 100vh;
    width: 100%;
    background-image: url('k');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* =========================
   NAVBAR
========================= */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
}

.nav-links li a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    transition: 0.3s;
}

.nav-links li a:hover, .nav-links li a.active {
    color: #00e6c3;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    height: 3px;
    width: 25px;
    background: #00e6c3;
    margin: 4px 0;
    transition: 0.3s;
}

/* =========================
   INTRO SECTION
========================= */
.about-intro {
    text-align: center;
    max-width: 900px;
    margin: 140px auto 60px auto;
    padding: 0 20px;
    font-size: 20px;
    line-height: 1.6;
}

/* =========================
   SERVICES SECTION
========================= */
.services-section {
    padding: 80px 10%;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 40px;
    position: relative;
    z-index: 2;
}

/* Service Cards */
.service-card {
    position: relative;
    border-radius: 25px;
    padding: 30px;
    background: rgba(6,39,41,0.9);
    color: #ffffff;
    transition: transform 0.4s, box-shadow 0.4s;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Card Icon */
.service-card .service-icon {
    font-size: 40px;
    color: #00e6c3;
    margin-bottom: 15px;
    transition: transform 0.3s;
}

/* Card Hover Effects */
.service-card:hover {
    transform: rotateX(3deg) rotateY(3deg) translateY(-10px) scale(1.03);
    box-shadow: 0 30px 70px rgba(0,230,195,0.4);
}

.service-card:hover .service-icon {
    transform: rotate(10deg) scale(1.2);
}

.service-card h2 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #00e6c3;
    transition: text-shadow 0.3s;
}

.service-card:hover h2 {
    text-shadow: 0 0 15px #00ffc3, 0 0 30px #00e6c3;
}

.service-card p, .service-card ul {
    position: relative;
    z-index: 2;
}

.service-card ul {
    margin-left: 20px;
    margin-bottom: 15px;
    list-style-type: disc;
    opacity: 0.9;
}

/* =========================
   SCROLL FADE-IN ANIMATION
========================= */
.hero-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

.hero-fade.appear {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   CALL TO ACTION
========================= */
.about-cta {
    text-align: center;
    margin: 80px auto 60px auto;
    max-width: 800px;
    position: relative;
    z-index: 2;
}

.about-cta h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #00e6c3;
}

.about-cta p {
    font-size: 18px;
    margin-bottom: 25px;
}

.btn.primary-btn {
    padding: 15px 30px;
    background: #00e6c3;
    color: #04191b;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s;
}

.btn.primary-btn:hover {
    background: #00ffc3;
    box-shadow: 0 0 20px #00e6c3;
}

/* =========================
   FOOTER
========================= */
footer {
    background: rgba(0,0,0,0.6);
    padding: 40px 10%;
    text-align: center;
    color: #ffffff;
    position: relative;
    z-index: 2;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links ul li a {
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
}

.footer-links ul li a:hover {
    color: #00e6c3;
}

.footer-social .social-icons a {
    margin: 0 10px;
    color: #ffffff;
    font-size: 20px;
    transition: 0.3s;
}

.footer-social .social-icons a:hover {
    color: #00e6c3;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){
    .services-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.navbar{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;

/* reduced navbar height */
padding:5px 8%;

/* gradient background */
background:linear-gradient(90deg,#008080,#000000);

z-index:1000;
}

/* bigger logo */
.logo img{
height:15px;
}

/* navigation links */
.nav-links{
display:flex;
gap:35px;
}

/* links style */
.nav-links a{
font-weight:500;
font-size:15px;
color:white;
transition:0.3s;
}

/* hover effect */
.nav-links a:hover{
color:#00e6c3;
}

/* HERO BACKGROUND ONLY */
.about-hero {
    position: relative;
    height: 300px; /* adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 10%;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('Eva001.png') center/cover no-repeat; /* replace with your image */
    z-index: 1;
    filter: brightness(0.6); /* darken image for readability */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25); /* semi-transparent overlay */
    z-index: 2;
}

.about-hero .about-intro {
    position: relative;
    z-index: 3; /* ensures text is above background and overlay */
    color: #fff; /* text color on top of image */
}

/* SERVICES SECTION PREMIUM 3D EFFECTS */
.services-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    padding: 80px 10%;
    perspective: 1000px; /* enables 3D effect on child cards */
}

.service-card {
    border-radius: 25px;
    padding: 40px 30px;
    /* Keep original background color (no change) */
    color: #fff; /* keep text readable if needed */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: transform 0.6s ease, box-shadow 0.6s ease;
    transform-style: preserve-3d; /* enable 3D transforms */
}

/* Hover 3D Lift Effect */
.service-card:hover {
    transform: translateY(-10px) rotateX(3deg) rotateY(3deg);
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}

/* Service Icon Enhancements */
.service-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    transition: transform 0.4s ease, color 0.4s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.2) rotate(10deg);
}

/* Headings and text */
.service-card h2 {
    font-weight: 800;
    margin-bottom: 15px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}

.service-card ul li {
    margin-left: 15px;
}

/* Optional: subtle gradient overlay for depth (won't change base color) */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    background: linear-gradient(rgba(255,255,255,0.02), rgba(0,0,0,0.05));
    pointer-events: none;
}

/* PORTFOLIO SECTION */
.portfolio-section {
    display: flex;
    gap: 30px;
    padding: 80px 5%;
    overflow-x: auto; /* enables horizontal scroll */
    scroll-behavior: smooth; /* smooth scrolling */
    -webkit-overflow-scrolling: touch;
}

.portfolio-item {
    flex: 0 0 250px; /* fixed width for carousel items */
    height: 180px;
    border-radius: 40px 0 40px 0; /* curved top-left & bottom-right */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform 0.4s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-section::-webkit-scrollbar {
    height: 8px; /* thin scrollbar */
}

.portfolio-section::-webkit-scrollbar-thumb {
    background-color: #00bfa5; /* teal theme */
    border-radius: 4px;
}

/* Scroll buttons */
.portfolio-carousel-wrapper {
    position: relative;
    width: 100%;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.25);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.scroll-btn:hover {
    background: rgba(0,0,0,0.45);
}

.scroll-btn.left {
    left: 0;
}

.scroll-btn.right {
    right: 0;
}

.portfolio-item img {
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.contact-section {
  position: relative;
  padding: 100px 10%;
  background: url('contact.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
}

.contact-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5); /* dark overlay for readability */
  z-index: 1;
}

.contact-wrapper {
  position: relative;
  z-index: 2; /* above overlay */
  max-width: 600px;
  margin: 0 auto;
}

.contact-wrapper input,
.contact-wrapper textarea {
  width: 100%;
  padding: 15px 20px;
  margin-bottom: 15px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  outline: none;
}

.contact-wrapper button {
  padding: 15px 40px;
  border: none;
  border-radius: 12px;
  background-color: teal; /* keep your color theme */
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.contact-wrapper button:hover {
  background-color: #008080cc; /* slightly darker teal on hover */
}

.seo-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.hero {
  padding-top: 80px; /* pushes hero content below fixed navbar */
}

/* Make hero start below navbar */
.hero {
  margin-top: 80px; /* adjust this to match your navbar height */
}