/* ==============================
   GLOBAL STYLES
============================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: black;
    color: #e7e7e7;
    min-height: 100vh;
    line-height: 1.5;
}

/* ==============================
   BACKGROUND ELEMENTS
============================== */
.image-gradient {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.5;
    z-index: -1;
}


.layer-blur {
    height: 0;
    width: 30rem;
    position: absolute;
    top: 20%;
    right: 0;
    box-shadow: 0 0 700px 5px white;
    rotate: -30deg;
    z-index: -1;
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 1;
    opacity: 100%;
}

/* ==============================
   CONTACT FORM (INSIDE HERO)
============================== */

.projects-hero2 {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  margin-left: -270px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
}

.projects-hero2 .content h1 {
  font-size: 6.3rem;
    text-shadow: 0 0 15px rgba(255,255,255,0.3);
}

.projects-hero2 .content p {
  font-size: 2rem;
}





/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: left;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 800px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 100px;
  z-index: 999;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}



/* ==============================
   CONTAINER & MAIN
============================== */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    overflow: hidden;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh);
}

/* ==============================
   HEADER & NAVIGATION
============================== */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 4rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 999;
}

header h1 {
    font-size: 3rem;
    font-weight: 300;
}

nav {
    display: flex;
    align-items: center;
    gap: 3rem;
}

nav a {
    font-size: 1rem;
    letter-spacing: 0.1rem;
    transition: color 0.2s ease;
    text-decoration: none;
    color: inherit;
}

nav a:hover {
    color: #a7a7a7;
}

/* ==============================
   LOGO (STANDARDIZED SIZE)
============================== */


.logo img {
    max-height: 130px; /* consistent size across all pages */
    width: auto;
    display: block;
}

/* ==============================
   BUTTONS
============================== */
.btn-signing {
    z-index: 999;
    background-color: lightgray;
    color: black;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.btn-signing:hover {
    background-color: white;
}

.btn-get-started {
    color: lightgray;
    text-decoration: none;
    background-color: black;
    border: 1px solid lightgray;
    border-radius: 14px;
      padding: 1rem 2.5rem;
  font-weight: 700;
  font-size: 1.15rem;
    letter-spacing: 0.1em;
    transition: background-color 0.2s ease;
}

.btn-get-started:hover {
    background-color: #1a1a1a;
}

.btn-signing-main {
    text-decoration: none;
    background-color: lightgray;
    color: black;
    padding: 0.6rem 2.5rem;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
}

.btn-signing-main:hover {
    background-color: gray;
}

/* ==============================
   HERO CONTENT
============================== */
.content {
    margin-top: 00px;
    max-width: 41rem;
    margin-left: 10%;
    z-index: 999;
}

.content h1 {
    font-size: 5.6rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    margin: 2rem 0;
    line-height: 1.2;
    text-shadow: 0 0 10px rgba(128, 128, 128, 0.418);
}

.description {
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    max-width: 35rem;
    color: lightgray;
}

/* ==============================
   TAG BOX
============================== */
.tag-box {
    display: none;
    position: relative;
    width: 18rem;
    height: 2.5rem;
    border-radius: 50px;
    background: linear-gradient(to right, #656565, #7f42a7, #6600c5, #5300a0, #757575, #656565);
    background-size: 200%;
    animation: animationGradient 2.5s linear infinite;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

@keyframes animationGradient {
    to {
        background-position: 200%;
    }
}

.tag-box .tag {
    position: absolute;
    inset: 3px;
    background-color: black;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s ease;
    cursor: pointer;
}

.tag-box .tag:hover {
    color: #5300a0;
}

/* ==============================
   BUTTON GROUPS
============================== */
.buttons {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
}

/* ==============================
   3D ROBOT
============================== */
.robot-3d {
    position: absolute;
    top: 30px;
    right: -20.5%;
    scale: 110%;
    z-index: 5;
}

/* ==============================
   VIDEO CONTAINER & RECTANGLE
============================== */
.vid-container {
    position: relative;
    display: inline-block;
}

.black-rectangle {
    visibility: hidden;
    position: absolute;
    width: 10000px;
    height: 38px;
    background-color: black;
    border-radius: 40px;
    z-index: 990;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* ==============================
   PROJECTS PAGE
============================== */
.projects-hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #e7e7e7;
    min-height: 60vh;
    padding-bottom: 2rem;
    margin-bottom: -60px;
}

.projects-hero .content {
    max-width: 100%; /* or 100% if you want full width */
    z-index: 3;
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.projects-hero h1 {
    font-size: 7rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
    text-shadow: 0 0 15px rgba(255,255,255,0.3);
}

.projects-hero p {
    margin: 1rem auto 0 auto;
    max-width: 40rem;
    text-align: center;
    color: #ccc;
}

.project-section {
    background-color: black;
    color: #e7e7e7;
    padding: 6rem 10%;
    line-height: 1.8;
}

.project-section h2 {
    font-size: 6.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}

.project-section h3 {
    font-size: 2.4rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}

.project-section p {
    font-size: 1.2rem;
    max-width: 250rem;
    margin-bottom: 1rem;
}


/* ==============================
   ABOUT SECTION
   (Intro stays as-is; details-block defaults to right-aligned)
============================= */

/* Container / intro (unchanged) */
#about {
  border-style: solid;
  border-color: #11a1bc;
  background-color: black;
  color: #ffffff;
  padding: 3rem 8%;
  line-height: 1.8;
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  z-index: 998;
}

#about .project-content {
  position: relative;
  z-index: 999;
  max-width: 1500px;
  margin: 0 auto;
}

/* Intro block — logo floats right, large lead paragraph */
#about .intro-block .logo-content {
  float: right;
  margin-left: 20px;
  margin-bottom: 10px;
}
#about .intro-block .logo-content img {
  max-width: 400px;
  width: auto;
  height: auto;
  display: block;
}
#about .intro-block p {
  font-size: 1.5rem;
}


#about .intro-block::after {
  content: "";
  display: table;
  clear: both;
}

/* ==============================
   DETAILS BLOCK
   Default: right-aligned
============================= */
#about .details-block {
  margin-top: 60px;
}

/* Apply base spacing */
#about .details-block h3,
#about .details-block ul {
  margin-bottom: 1em;
  transition: all 0.25s ease;
}

#about .details-block p {
    
    margin-bottom: 80px;
}

/* Default: right-aligned "column" style */
#about .details-block h3 {
 font-size: 3rem;
    text-align: right;
  margin-left: auto;      /* push block to the right */
  margin-right: 5%;       /* gap from right edge */
  max-width: 80%;   
}
#about .details-block p,
#about .details-block ul {
  text-align: right;
  margin-left: auto;      /* push block to the right */
  margin-right: 5%;       /* gap from right edge */
  max-width: 80%; 
  font-size: 1.5rem;        /* creates the column width */
}

/* Use .alt-left to flip a section to the left column */
#about .details-block .alt-left {
  text-align: left !important;
  margin-left: 5% !important;  /* gap from left edge */
  margin-right: auto !important;
  max-width: 80% !important;
}

/* If a single heading should be left and its following paragraph should also be left,
   add .alt-left to both the h3 and the p (or ul) so both use the left column styling. */

/* Make lists inherit alignment when inline, or target UL specifically */
#about .details-block ul {
  list-style-position: outside;
  padding-left: 1.2rem;
  font-size: 1.5rem;
}


#about .closing-paragraph {
  text-align: center !important;
  font-size: 2rem;          /* increase text size */
  max-width: 900px;         /* wider, but still readable */
  margin: 3rem auto !important;        /* centers horizontally */
  line-height: 1.8;
  font-weight: 500;  
  padding-top: 2rem;       /* slightly bolder for emphasis */
}

/* ==============================
   4) GLOWING GRID OVERLAY (FOR ABOUT PAGE)
============================== */
#about {
  position: relative; /* ensures overlay is positioned correctly */
  overflow: hidden;   /* prevents grid from spilling outside */
}

#about::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17,161,188,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,161,188,.3) 1px, transparent 1px);
  background-size: 100px 100px;
  opacity: 1;
  z-index: 999;
  mix-blend-mode: screen;
  animation: gridMove 30s linear infinite;
}

/* Grid animation */
@keyframes gridMove {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 800px 800px, 800px 800px; }
}

/* Ensure content is above overlay */
#about .project-content {
  position: relative;
  z-index: 1000;
}

#about li {
  margin-bottom: 40px;
}

/* ==============================
   BLACKROCK SECTION
============================== */
#blackrock {
     border-style: solid;
  border-color: #11a1bc;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background-color: black;
    color: #ffffff;
    padding: 3rem 8%;
    line-height: 1.8;
    z-index: 998;
}

#blackrock .project-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem;
    z-index: 999;
}

#blackrock .text-content {
    z-index: 999;
    flex: 1 1 50%;
    max-width: 700px;
    
}

#blackrock .logo-content {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

#blackrock .logo-content img {
    max-width: 700px;
    width: 100%;
    height: auto;
    z-index: 999;
}

.cards-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    margin-top: 3rem;
    z-index: 999;
}

.cards-gallery img {
    z-index: 999;
    max-width: calc((100% / 4) - 1.5rem);
    width: 80%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cards-gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}


#blackrock::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: dotsMove 25s linear infinite;
  z-index: 0;
  mix-blend-mode: screen;
}

@keyframes dotsMove {
  0% { background-position: 0 0; }
  50% { background-position: 300px -300px; }
  100% { background-position: 0 0; }
}



/* ==============================
   SERVICES PAGE STYLES (FIXED)
============================== */

/* Full-width section behavior like #about */


#services {
  border-style: solid;
  border-color: #11a1bc;
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: black;
  color: #ffffff;
  padding: 3rem 8%;
  line-height: 1.8;
  z-index: 998;
}

#services hr.solid {
  border-color: #11a1bc;
  margin-top: -40px;
  margin-bottom: 50px;
}

#services hr.solid2 {
  border-color: #11a1bc;
  margin-top: 0px;
  margin-bottom: 50px;
}

.subhead {
    font-size: 2rem;
    max-width: 90rem;
}

.projects-hero p.subhead {
        max-width: 90rem;
}


/* container inside full-width area */
#services .project-content {
  position: relative;
  z-index: 999;
  max-width: 1500px;
  margin: 0 auto;
}

/* Intro block */
#services .intro-block .logo-content {
  float: inline-end;
  margin-left: 20px;
  margin-bottom: 10px;
}
#services .intro-block .logo-content img {
  max-width: 750px;
  width: auto;
  height: auto;
  display: block;
}

#services .intro-block h2 {
  font-size:6.5rem;
  line-height: 1.1;
}
#services .intro-block p {
  max-width: 100rem;
  text-align: left;  /* Fix: left-align intro paragraph */
}

#services p {
    font-size: 1.5rem;
}

/* DETAILS BLOCK - two-column layout */
#services .details-block {
  margin-top: 60px;
  display: block;
}

/* Main services column (left) */
#services .details-main {
    font-size: 1.5rem;
    margin-top: 100px;
  text-align: left; 
        /* Fix: left-align all content */
  margin-left: 0;
  margin-right: auto;
}

#services .details-main {
    font-size: 1.5rem;
    margin-top: 100px;
  text-align: left; 
        /* Fix: left-align all content */
  margin-left: 0;
  margin-right: auto;
}

/* Section headings */
#services h3 {
  font-size: 3.0rem;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 6px rgba(255,255,255,0.08);
}

#services p { 
  margin-bottom: 50px;
  max-width: 800px;   
}


#services ul { 
  margin-bottom: 50px;
  max-width: 1600px;   
  margin-bottom: 100px;
}

/* Service cards grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

.service-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 10px;
  padding: 1.1rem;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.service-card h4 {
  font-size: 1.1rem;
  margin-bottom: 0.45rem;
}

.service-card p {
  font-size: 0.95rem;
  color: #d4d4d4;
}

.right-align-section {
  text-align: right;
}

.right-align-section p {
  text-align: right;       /* ensure the text is right-aligned */
  max-width: 700px;        /* limit the width of the paragraph */
  margin-left: auto;       /* push it to the right side */
  margin-bottom: 1.5rem;  /* keep spacing consistent */
}

/* Hover effect */
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* Packages in side column */
.packages-grid {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.package {
  padding: 0.9rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(224, 13, 13, 0.03);
}

.package h5 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.package p {
  font-size: 0.95rem;
  color: #d0d0d0;
}

/* CTA buttons */
.service-cta {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 7rem;
  align-items: stretch;
}

.service-cta .btn-signing {
  width: 100%;
  text-align: center;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.04rem;
}

.service-cta .btn-quiet {
  background: transparent;
  color: lightgray;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
}

/* Closing paragraph */
#services .closing-paragraph {
  text-align: center;
  font-size: 1.6rem;
  max-width: 900px;
  margin: 3rem auto 0 auto;
  line-height: 1.6;
  font-weight: 500;
}

/* Lists inside services */
#services ul {
  padding-left: 1.2rem;
  margin-top: 0.6rem;
}



#services {
  position: relative;
  overflow: hidden;
  background-color: #000;
}

#services::before,
#services::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 20px);
  z-index:0;
  mix-blend-mode: screen;
}

#services::before {
  animation: moveLines 30s linear infinite;
}

#services::after {
  background-image: repeating-linear-gradient(-45deg, rgba(17,161,188,0.1) 0 1px, transparent 1px 30px);
  animation: moveLinesReverse 45s linear infinite;
}

@keyframes moveLines {
  0% { background-position: 0 0; }
  100% { background-position: 300px 300px; }
}

@keyframes moveLinesReverse {
  0% { background-position: 0 0; }
  100% { background-position: -1000px -300px; }
}

/* ==========================
   CRYSTAL SHARD BUTTON — CLEAN
========================== */
 .btn-signing {
  position: relative;
  display: inline-block;
  padding: 1rem 2.5rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  background: #0b0b0b;
  overflow: hidden;
  z-index: 1;
  border: 2px solid rgba(17,161,188,0.7);
  box-shadow: 0 0 15px rgba(17,161,188,0.6), 0 0 35px rgba(17,161,188,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Shard streak overlay */
 .btn-signing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(17,161,188,0.3) 0%, rgba(255,255,255,0.3) 50%, rgba(17,161,188,0.3) 100%);
  transform: skewX(-20deg) translateX(-150%);
  animation: shardMove 1.5s linear infinite;
  mix-blend-mode: screen;
  z-index: 0;
}

/* Hover effect */
 .btn-signing:hover {
    color: #000;
  transform: scale(1.08) rotate(-0.5deg);
  box-shadow: 0 0 30px rgba(17,161,188,0.9), 0 0 60px rgba(17,161,188,0.5);
}

/* Shard animation */
@keyframes shardMove {
  0% { transform: skewX(-20deg) translateX(-150%); }
  50% { transform: skewX(-20deg) translateX(50%); }
  100% { transform: skewX(-20deg) translateX(150%); }
}

/* Ensure text stays above overlay */
 .btn-signing span {
  position: relative;
  z-index: 1;
}

 .btn-signing-main {
   position: relative;
  display: inline-block;
  padding: 1rem 2.5rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  background: #0b0b0b;
  overflow: hidden;
  z-index: 1;
  border: 2px solid rgba(17,161,188,0.7);
  box-shadow: 0 0 15px rgba(17,161,188,0.6), 0 0 35px rgba(17,161,188,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Shard streak overlay */
 .btn-signing-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(17,161,188,0.3) 0%, rgba(255,255,255,0.3) 50%, rgba(17,161,188,0.3) 100%);
  transform: skewX(-20deg) translateX(-150%);
  animation: shardMove 1.5s linear infinite;
  mix-blend-mode: screen;
  z-index: 0;
}

/* Hover effect */
 .btn-signing-main:hover {
    color: #000;
    background: #fff; /* background becomes white */
  transform: scale(1.08) rotate(-0.5deg);
  box-shadow: 0 0 30px rgba(17,161,188,0.9), 0 0 60px rgba(17,161,188,0.5);
}

/* Shard animation */
@keyframes shardMove {
  0% { transform: skewX(-20deg) translateX(-150%); }
  50% { transform: skewX(-20deg) translateX(50%); }
  100% { transform: skewX(-20deg) translateX(150%); }
}

/* Ensure text stays above overlay */
 .btn-signing-main span {
  position: relative;
  z-index: 1;
}


/* ==============================
   MEDIA QUERIES (RESPONSIVE)
============================== */

/* ==============================
   Desktop / Large screens
============================== */

@media (min-width: 1024px) and (max-width: 1024px) {



.projects-hero2 {
  margin-top: -870px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
}

.projects-hero2 .content h1 {
  font-size: 7rem !important;
}

.projects-hero2 .content p {
  font-size: 2.5rem !important;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}


/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 0rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 320px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}

  #services-intro .content h1{
font-size: 10rem;
margin-left: 0px;
}

#services-intro .content p{
margin-left: 0px;
font-size: 3.5rem;
}


#services .project-content img {
  scale: .9;
  margin-right: 50px;
  margin-bottom: 50px;

}

#services .project-content h2 {
text-align: center;
font-size: 5rem;
margin-bottom: 50px;
}

#services .project-content p {
text-align: center;
font-size: 2.2rem;
margin-bottom: 50px;
}

#services .details-main h3 {
  margin-top: 100px;
margin-bottom: 20px;
font-size: 5rem;
text-align: center;
}

#services .details-main p {
margin-bottom: 40px;
font-size: 2.2rem;
text-align: center;
margin-left: 40px;
}

#services .details-main .right-align-section p {
margin-bottom: 0px;
font-size: 2.2rem;
margin-left: 40px;
text-align: center;
}

#services .btn-signing {
  margin-bottom: 50px;
  text-align: center;
  font-size: 2.2rem;
}

#services .details-main hr {
  margin-bottom: -40px;
}


#services .details-main ul {
margin-bottom: 0px;
font-size: 2.2rem;
}


#services .details-main .closing-paragraph {
 margin-left: 10px;
}

  .logo {
      margin-left: 15px;
    }

    .btn-signing {
      margin-right: 30px;
    }

    header {
        padding: 1rem 0.5rem;
    }
    nav {
      font-size: .5rem;
      gap: 2rem;
    }
    .content {
        margin-top: 75%;
        text-align: center;
        max-width: 400rem;
    }
    .content h1 {
        font-size: 4.8rem;
        margin-left: -65px;
    }
    .robot-3d {
        scale: 100%;
        top: -13%;
        right: -1%;
    }
    .black-rectangle {
      visibility: visible;
        top: 1060px;
        left: -100px;

    }

    .description {
      font-size: 1.5rem;
      margin-left: 120px;
    }

    .buttons {
      margin-left: 110px;
    }


#blackrock .text-content {
    max-width: 100vw;       /* choose vw or px; example: 60vw (responsive) */
    margin-left: -100px;
    margin-right: auto;    /* centers the column inside the full-width section */
    text-align: center;    /* optional: keep heading & paragraph centered */
  }
.page-projects .projects-hero {
    padding: 1rem;
  }

    .page-projects .projects-hero .content {
      max-width: 200rem;
    }

  .page-projects .projects-hero .content h1 {
    font-size: 8rem;
    margin-left: 20px;
    margin-top: 30px;
  }
  .page-projects .projects-hero .content .description {
    font-size: 1.6rem;
     margin-left: 75px;
     margin-top: -10px;
     max-width: 800px;
  }

  #blackrock h2 {
    margin-left: 100px;
    font-size: 7.5rem;
    margin-top: -90px;
    text-align: center;
  }

    #blackrock p {
    margin-left: 120px;
    font-size: 2rem;
    text-align: center;
  }

    #blackrock .logo-content{
      scale: .8;
      margin-top: -50px;
  
  }

  #blackrock .cards-gallery {
     justify-content: center;
     margin-top: 1rem;
  }

    #blackrock .logo-content {
    order: -1;               /* makes logo render first */
    width: 100%;             /* stack full-width so it sits above */
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }

  
    #about-title {
  margin-top: -90px;
  margin-left: 0;
  font-size: 7rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .6;
  margin-right: -60px;
  margin-top: -60px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 5rem;
 text-align: center;
}

#about .project-content .intro-block p {
  margin-top: 50px;
 font-size: 2rem;
 text-align: center;
 max-width: 1024px;
}

#about .project-content .details-block h3 {
 font-size: 3.2rem;
  max-width: 800px;
}

#about .project-content .details-block p {
 font-size: 2rem;
 text-align: right;
 max-width: 760px;
}

#about .project-content .details-block ul {
 font-size: 2rem;
 max-width: 350px;
}

}


@media (min-width: 912px) and (max-width: 1023px) {

  #services-intro h1 {
    margin-top: -150px;
    margin-left: 10px;
    font-size: 7rem;
  }

   #services-intro p {
    margin-left: 10px;
    max-width: 500px;
  }

 #services {
  margin-top: -290px;
}

.projects-hero2 {
  margin-top: -570px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 7rem !important;
  margin-left: 10px;
}

.projects-hero2 .content p {
  font-size: 1.9rem !important;
  max-width: 700px !important;
  text-align: center;
  margin-left:60px !important;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}


/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 0rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 320px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}


 .logo {
      margin-left: 10px;
    }

    .btn-signing {
      font-size: 1.2rem;
      margin-right: 15px;
    }

    header {
        padding: 1rem 0.5rem;
    }
    nav {
      font-size: .4rem;
      gap: 1.5rem;
    }
    .content {
        margin-top: 75%;
        text-align: center;
        max-width: 400rem;
    }
    .content h1 {
        font-size: 4.8rem;
        margin-left: -60px;
        margin-top: 130px;
    }
    .robot-3d {
        scale: 100%;
        top: -13%;
        right: -1%;
    }
    .black-rectangle {
      visibility: visible;
        top: 1067px;
        left: -100px;

    }

    .description {
      font-size: 1.5rem;
      margin-left: 70px;
    }

    .buttons {
      margin-left: 70px;
    }

#blackrock .text-content {
    max-width: 100vw;       /* choose vw or px; example: 60vw (responsive) */
    margin-left: -100px;
    margin-right: auto;    /* centers the column inside the full-width section */
    text-align: center;    /* optional: keep heading & paragraph centered */
  }
.page-projects .projects-hero {
    padding: 1rem;
  }

    .page-projects .projects-hero .content {
      max-width: 200rem;
    }

  .page-projects .projects-hero .content h1 {
    font-size: 8rem;
    margin-top: 30px;
  }
  .page-projects .projects-hero .content .description {
    font-size: 1.6rem;
     margin-left: 90px;
     margin-top: -10px;
  }

  #blackrock h2 {
    margin-left: 100px;
    font-size: 5.9rem;
    text-align: center;
  }

    #blackrock p {
      margin-left: 100px;
    font-size: 2rem;
    text-align: center;
  }

    #blackrock .logo-content{
      scale: .8;
      margin-top: -50px;
  
  }

  #blackrock .cards-gallery {
     justify-content: center;
     margin-top: 1rem;
  }

    #blackrock .logo-content {
    order: -1;               /* makes logo render first */
    width: 100%;             /* stack full-width so it sits above */
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }
 #about-title {
  margin-top: -90px;
  margin-left: 0;
  font-size: 7rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .6;
  margin-right: -60px;
  margin-top: -60px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 5rem;
 text-align: center;
}

#about .project-content .intro-block p {
  margin-top: 50px;
 font-size: 2rem;
 text-align: center;
 max-width: 1024px;
}

#about .project-content .details-block h3 {
 font-size: 3.2rem;
  max-width: 800px;
}

#about .project-content .details-block p {
 font-size: 2rem;
 text-align: right;
 max-width: 760px;
}

#about .project-content .details-block ul {
 font-size: 2rem;
 max-width: 350px;
}

}

@media (max-width: 820px) {


#services .details-main .btn-signing {
display: block;
margin-top: -70px;
font-size: 1.5rem;
margin-bottom: 30px;
}

#services .closing-paragraph {
  margin-top: 20px;
}
  
   .logo {
      margin-left: 15px;
      scale: .9;
    }

    .btn-signing {
      font-size: 1rem;
      margin-right: 30px;
    }

    header {
        padding: 1rem 0.5rem;
    }
    nav {
      margin-left: -40px;
      font-size: 2rem;
      gap: 2.5rem;
    }
    .content {
        margin-top: 75%;
        text-align: center;
    }
    .content h1 {
        font-size: 4.8rem;
    }
    .robot-3d {
        scale: 100%;
        top: -13%;
        right: -1%;
    }
    .black-rectangle {
        top: 530px;
        left: -100px;
    }

    .navprojects {
      display: none;
    }
 #about-title {
  margin-top: -90px;
  margin-left: 0;
  font-size: 7rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .6;
  margin-right: -60px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
  margin-top: 50px;
 font-size: 1.5rem;
 text-align: center;
 max-width: 760px;
}

#about .project-content .details-block h3 {
 font-size: 3.2rem;
  max-width: 800px;
}

#about .project-content .details-block p {
 font-size: 1.5rem;
 text-align: right;
 max-width: 760px;
}

#about .project-content .details-block ul {
 font-size: 1.5rem;
 max-width: 350px;
}

}

@media (min-width: 719px) and (max-width: 820px)  { 
.projects-hero2 {
  margin-top: -770px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}
    #blackrock h2 {
    margin-top: -80px;
  }
 #services-intro .content h1{
font-size: 7rem;
}

#services-intro .content p{
margin-left: 20px;
}


#services .project-content img {
  scale: .9;
  margin-right: -50px;
  margin-bottom: 50px;

}

#services .project-content h2 {
text-align: center;
font-size: 5rem;
margin-bottom: 50px;
}


#services .details-main ul {
margin-bottom: 0px;
}

  main {
        padding: 1.25rem;
    }
    .logo {
        margin-left: 20px;
    }
    .robot-3d {
        left: 1%;
        scale: 0.8;
        z-index: 997;
    }
    .black-rectangle {
        visibility: visible;
        z-index: 999;
        margin-top: 250px;
    }
    .content {
        margin-left: 4px;
        max-width: 100%;
        padding: 1rem 1rem 2rem;
        z-index: 999;
        pointer-events: none;
    }
    .content h1 {
        margin-left: clamp(-20px, -2vw, 0);
        margin-top: clamp(40px, 8vh, 80px);
        font-size: clamp(3.2rem, 4vw, 2.2rem);
        pointer-events: none;
    }
    .description {
        margin-left: 70px;
    }
    header {
        padding: 0.75rem 1rem;
    }
    .buttons {
        pointer-events: all;
        margin-left: 80px;
    }

    #blackrock .text-content {
    max-width: 100vw;       /* choose vw or px; example: 60vw (responsive) */
    margin-left: -100px;
    margin-right: auto;    /* centers the column inside the full-width section */
    text-align: center;    /* optional: keep heading & paragraph centered */
  }
.page-projects .projects-hero {
    padding: 1rem;
  }

    .page-projects .projects-hero .content {
      max-width: 200rem;
    }

  .page-projects .projects-hero .content h1 {
    font-size: 6rem;
    margin-top: 90px;
  }
  .page-projects .projects-hero .content .description {
    font-size: 1.2rem;
     margin-left: 90px;
     margin-top: -10px;
  }

  #blackrock h2 {
    margin-left: 100px;
    font-size: 5.9rem;
    text-align: center;
  }

    #blackrock p {
      margin-left: 100px;
    font-size: 2rem;
    text-align: center;
  }

    #blackrock .logo-content{
      scale: .8;
      margin-top: -50px;
  
  }

  #blackrock .cards-gallery {
     justify-content: center;
     margin-top: 1rem;
  }

    #blackrock .logo-content {
    order: -1;               /* makes logo render first */
    width: 100%;             /* stack full-width so it sits above */
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }

.page-projects .container .projects-hero .content .description {
        font-size: 1.2rem;
        margin-left: 30px;
    }

    .page-projects .container .projects-hero .content h1 {
        font-size: 8rem;
        margin-left: 30px;
        margin-top: 5px;
    }

    #about-title {
  margin-top: -90px;
  margin-left: 0;
  font-size: 7rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .6;
  margin-right: -60px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
  margin-top: 50px;
 font-size: 1.5rem;
 text-align: center;
 max-width: 760px;
}

#about .project-content .details-block h3 {
 font-size: 3.2rem;
  max-width: 800px;
}

#about .project-content .details-block p {
 font-size: 1.5rem;
 text-align: right;
 max-width: 760px;
}

#about .project-content .details-block ul {
 font-size: 1.5rem;
 max-width: 350px;
}


}


/* ==============================
   Medium screens / tablets
============================== */
@media (max-width: 768px) {
.projects-hero2 {
  margin-top: -750px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}
  #services .details-main .btn-signing {
display: block;
margin-top: -70px;
font-size: 1.5rem;
margin-bottom: 20px;
}

#services .closing-paragraph {
  margin-top: 20px;
}

   #services-intro .content h1{
font-size: 7rem;
}

#services-intro .content p{
margin-left: 20px;
}


#services .project-content img {
  scale: .9;
  margin-right: -50px;
  margin-bottom: 50px;

}

#services .project-content h2 {
text-align: center;
font-size: 5rem;
}


#services .details-main ul {
margin-bottom: 0px;
}

    main {
        padding: 1.25rem;
    }
    .logo {
        margin-left: 20px;
    }
    .robot-3d {
        left: 1%;
        scale: 0.75;
        z-index: 997;
    }
    .black-rectangle {
        visibility: visible;
        z-index: 999;
        margin-top: 165px;
    }
    .content {
        margin-left: 4px;
        max-width: 100%;
        padding: 1rem 1rem 2rem;
        z-index: 999;
        pointer-events: none;
    }
    .content h1 {
        margin-left: clamp(-20px, -2vw, 0);
        margin-top: clamp(40px, 8vh, 80px);
        font-size: clamp(3.2rem, 4vw, 2.2rem);
        pointer-events: none;
    }
    .description {
        margin-left: 40px;
    }
    header {
        padding: 0.75rem 1rem;
    }
    .buttons {
        pointer-events: all;
        margin-left: 35px;
    }

    .page-projects .container .projects-hero .content .description {
        font-size: 1.1rem;
        margin-left: 0px;
    }

    #about-title {
  margin-top: -90px;
  margin-left: 0;
  font-size: 7rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .5;
  margin-right: -100px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
  margin-top: 50px;
 font-size: 1.5rem;
 text-align: center;
 max-width: 760px;
}

#about .project-content .details-block h3 {
 font-size: 3.2rem;
  max-width: 800px;
}

#about .project-content .details-block p {
 font-size: 1.5rem;
 text-align: right;
 max-width: 760px;
}

#about .project-content .details-block ul {
 font-size: 1.5rem;
 max-width: 350px;
}
}

/* ==============================
   iPhone 14 Pro Max (~430px)
============================== */
@media (max-width: 767px) {

    header {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }
    .black-rectangle {
        visibility: visible;
        margin-top: 40px;
        box-shadow: 0 0 15px 5px rgba(0,0,0,0.9);
    }
    .btn-signing {
        display: none;
    }
    .logo {
        margin-top: 0px;
        margin-left: 10px;
    }
    .content {
        margin-top: 95%;
        margin-left: 40px;
    }
    .content h1 {
        margin-left: -25px;
        margin-top: 60px;
        font-size: 2.3rem;
        pointer-events: none;
    }
    .description {
        margin-left: -29px;
        font-size: 0.9rem;
    }
    .robot-3d {
        margin-top: -90px;
        scale: 0.85;
    }
    #blackrock {
        padding: 2rem 1rem;
    }
    .cards-gallery img {
        max-width: 100%;
    }
    .buttons {
        flex-direction: column;
        margin-left: -30px;
    }
    .btn-get-started,
    .btn-signing-main {
        font-size: 1rem;
    }

    .page-projects .projects-hero {
    padding: 1rem;
  }

    .page-projects .projects-hero .content {
      max-width: 200rem;
    }

  .page-projects .projects-hero .content h1 {
    font-size: 3.8rem;
    margin-left: 10px;
    margin-top: 30px;
  }
  .page-projects .projects-hero .content .description {
    font-size: 0.8rem;
     margin-left: 10px;
     margin-top: -10px;
  }

  #blackrock h2 {
    font-size: 3rem;
    text-align: center;
  }

    #blackrock p {
    font-size: 1rem;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
  }

    #blackrock .logo-content{
      scale: .9;
      margin-top: -50px;
  
  }

  #blackrock .cards-gallery {
     justify-content: center;
     margin-top: 1rem;
  }

  #blackrock .logo-content {
    order: -1;               /* makes logo render first */
    width: 100%;             /* stack full-width so it sits above */
    display: flex;
    justify-content: center;
    margin-bottom: -3rem;
    margin-top: -20px;
    margin-left: 6px;
  }

.page-projects .container .projects-hero .content .description {
        font-size: 1rem;
    }

  
}

/* ==============================
   iPhone 12/13/14 (~414px)
============================== */
@media (min-width: 391px ) and (max-width: 414px) {
    header {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        margin-left: 35px;
    }
    .black-rectangle {
        visibility: visible;
        margin-top: 143px;
        box-shadow: 0 0 15px 5px rgba(0,0,0,0.9);
    }
    .btn-signing {
        display: none;
    }
    .logo {
        margin-top: 0px;
    }
    .content {
        margin-top: 20rem;
        max-width: 95%;
    }
    .content h1 {
        margin-left: -25px;
        margin-top: 70px;
        font-size: 2.2rem;
    }
    .description {
        margin-top: -15px;
        margin-left: -27px;
        font-size: 0.9rem;
    }
    .robot-3d {
        margin-top: -90px;
        scale: 0.96;
    }
    #blackrock {
        padding: 2rem 1rem;
    }
    .cards-gallery img {
        max-width: 100%;
    }
    .buttons {
        flex-direction: column;
        margin-bottom: 50px;
        margin-left: -20px;
    }
    .btn-get-started,
    .btn-signing-main {
        font-size: 1rem;
    }

    .page-projects .projects-hero {
    padding: 1rem;
  }

    .page-projects .projects-hero .content {
      max-width: 200rem;
    }

  .page-projects .projects-hero .content h1 {
    font-size: 3.8rem;
    margin-left: 10px;
    margin-top: 30px;
  }
  .page-projects .projects-hero .content .description {
    font-size: 1rem;
     margin-left: 10px;
     margin-top: -10px;
  }

  #blackrock h2 {
    font-size: 3rem;
    text-align: center;
  }

    #blackrock p {
    font-size: 1rem;
    text-align: center;
  }

    #blackrock .logo-content{
      scale: .9;
      margin-top: -50px;
  
  }

  #blackrock .cards-gallery {
     justify-content: center;
     margin-top: 1rem;
  }

   #blackrock .logo-content {
    order: -1;               /* makes logo render first */
    width: 100%;             /* stack full-width so it sits above */
    display: flex;
    justify-content: center;
    margin-bottom: -3rem;
    margin-top: -20px;
    margin-left: 6px;
  }

#about-title {
  margin-top: -90px;
  margin-left: 0;
  font-size: 3.5rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .5;
  margin-right: -35px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1rem;
 text-align: center;
 max-width: 350px;
}

#about .project-content .details-block h3 {
 font-size: 2.2rem;
  max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1rem;
 max-width: 350px;
}


}

@media (min-width: 376px ) and (max-width: 390px) {
header {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        margin-left: 35px;
    }
.black-rectangle {
  margin-top: 80px;
}

.content {
  margin-top: 450px;
}

.robot-3d {
margin-top: -70px;
  scale: .9;
}

.content h1 {
  margin-top: -80px;
  font-size: 2rem;
}

.page-projects .projects-hero {
    padding: 1rem;
  }

    .page-projects .projects-hero .content {
      max-width: 200rem;
    }

  .page-projects .projects-hero .content h1 {
    font-size: 3.8rem;
    margin-left: 10px;
    margin-top: 30px;
  }
  .page-projects .projects-hero .content .description {
    font-size: 0.8rem;
     margin-left: 10px;
     margin-top: -10px;
  }

  #blackrock h2 {
    font-size: 3rem;
    text-align: center;
  }

    #blackrock p {
    font-size: 1rem;
    text-align: center;
  }

    #blackrock .logo-content{
      scale: .9;
      margin-top: -50px;
  
  }

  #blackrock .cards-gallery {
     justify-content: center;
     margin-top: 1rem;
  }

#blackrock .logo-content {
    order: -1;               /* makes logo render first */
    width: 100%;             /* stack full-width so it sits above */
    display: flex;
    justify-content: center;
    margin-bottom: -3rem;
    margin-top: -20px;
    margin-left: 6px;
  }

.page-projects .container .projects-hero .content h1 {
  margin-top: 50px;
    }

    .page-projects .container .projects-hero .content .description {
      font-size: .85rem;
      margin-left: 2px;
    }



#about-title {
  margin-left: 0;
  font-size: 3.5rem;
}

#about-intro {
  margin-bottom: -200px;
}

#about img {
  scale: .5;
  margin-right: -35px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1rem;
 text-align: center;
 max-width: 350px;
}

#about .project-content .details-block h3 {
 font-size: 2.2rem;
max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1rem;
 text-align: right;
 max-width: 350px;
}


}

/* ==============================
   iPhone SE (~375px)
============================== */
@media (max-width: 375px) {


    header {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }
    .black-rectangle {
        visibility: visible;
        margin-top: 45px;
        box-shadow: 0 0 15px 5px rgba(0,0,0,0.9);
    }
    .btn-signing {
        display: none;
    }
    .logo {
        margin-top: 0px;
    }
    
    .content h1 {
      margin-top: 100px;
      font-size: 2rem;
    }

    .page-projects .container .projects-hero .content h1 {
        margin-left: clamp(-20px, -2vw, 0);
        margin-top: 100px;
        font-size: clamp(1.6rem, 4vw, 2.2rem);
        pointer-events: none;
        font-size: 3rem;
    }
    .page-projects .container .projects-hero .content .description {
        font-size: .8rem;
    }
    .robot-3d {
        scale: 0.8;
    }
    #blackrock {
        padding: 2rem 1rem;
    }
    .cards-gallery img {
        max-width: 100%;
    }
    .buttons {
        flex-direction: column;
        margin-bottom: 50px;
        margin-left: -25px;
    }
    .btn-get-started,
    .btn-signing-main {
        font-size: 1rem;
    }

    .page-projects .projects-hero {
    padding: 1rem;
  }


    .page-projects .projects-hero .content {
      max-width: 200rem;
    }

  .page-projects .projects-hero .content h1 {
    font-size: 3rem;
    margin-left: 10px;
    margin-top: 100px;
  }
  .page-projects .projects-hero .content .description {
    font-size: 0.8rem;
     margin-left: 10px;
     margin-top: -10px;
     margin-bottom: 40px;
  }

  #blackrock h2 {
    font-size: 3rem;
    text-align: center;
  }

    #blackrock p {
    font-size: 1rem;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
  }

    #blackrock .logo-content{
      scale: .9;
      margin-top: -50px;
  
  }

  #blackrock .cards-gallery {
     justify-content: center;
     margin-top: 1rem;
  }

#blackrock .logo-content {
    order: -1;               /* makes logo render first */
    width: 100%;             /* stack full-width so it sits above */
    display: flex;
    justify-content: center;
    margin-bottom: -3rem;
    margin-top: -20px;
    margin-left: 6px;
  }




}

/* ==============================
   Smaller phones (~360px)
============================== */
@media (max-width: 374px) {

  #servicesheader {
  margin-left: 35px;
display: flex;
justify-content: center; /* centers horizontally */
align-items: center;     /* centers vertically */
}

#services .intro-block img {
  margin-bottom: -30px;
}

 #services-intro .content h1{
  margin-top: 0px;
  margin-left: 10px;
  font-size: 3.5rem;
  margin-bottom: -40px;
}

#services-intro .content p{
  margin-top: 70px;
  margin-left: 10px;
  font-size: 1.3rem;
}


#services {
margin-top: -130px;
}

#services .project-content img {
  scale: .4;
margin-right: -225px;
margin-top: 70px;
}

#services .project-content h2 {
font-size: 2.5rem;
text-align: center;
margin-top: -150px;
}


#services .project-content p {
font-size: 1rem;
text-align: center;
}


#services .details-main h3 {
font-size: 3rem;
text-align: center;
}

#services .details-main ul {
font-size: 1rem;
text-align: left;
}

#services .details-main li {
font-size: 1rem;
margin-bottom: 20px;
}


#services .closing-paragraph {
  margin-top: -80px;
}


    header {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }
    .black-rectangle {
        visibility: visible;
        margin-top: -10px;
        box-shadow: 0 0 15px 5px rgba(0,0,0,0.9);
    }
    .btn-signing {
        display: none;
    }
    .logo {
        margin-top: 0px;
    }
    .content {
        margin-top: 22rem;
        max-width: 95%;
    }
    .content h1 {
        margin-left: clamp(-20px, -2vw, 0);
        margin-top: -10px;
        font-size: clamp(1.6rem, 4vw, 2.2rem);
        pointer-events: none;
    }
    .description {
        margin-top: -15px;
        margin-left: -20px;
        font-size: 0.9rem;
        margin-bottom: -30px;
    }
    .robot-3d {
        margin-top: -85px;
        scale: 0.8;
    }
    #blackrock {
        padding: 2rem 1rem;
    }
    .cards-gallery img {
        max-width: 100%;
    }
    .buttons {
        flex-direction: column;
        margin-left: -25px;
    }
    .btn-get-started,
    .btn-signing-main {
        font-size: 0.8rem;
    }
}

@media (width: 390px) {

  .projects-hero2 {
  margin-top: -420px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}
#servicesheader {
  margin-left: 35px;
display: flex;
justify-content: center; /* centers horizontally */
align-items: center;     /* centers vertically */
}

#services .intro-block img {
  margin-bottom: -30px;
}

 #services-intro .content h1{
  margin-top: 0px;
  margin-left: 10px;
  font-size: 3.5rem;
  margin-bottom: -40px;
}

#services-intro .content p{
  margin-top: 70px;
  margin-left: 10px;
  font-size: 1.3rem;
}


#services {
margin-top: -130px;
}

#services .project-content img {
  scale: .4;
margin-right: -205px;
margin-top: 70px;
}

#services .project-content h2 {
font-size: 2.5rem;
text-align: center;
margin-top: -150px;
}


#services .project-content p {
font-size: 1rem;
text-align: center;
}


#services .details-main h3 {
font-size: 3rem;
text-align: center;
}

#services .details-main ul {
font-size: 1rem;
text-align: left;
}

#services .details-main li {
font-size: 1rem;
margin-bottom: 20px;
}


#services .details-main .btn-signing {
display: block;
margin-top: -70px;
}



#services .closing-paragraph {
  margin-top: 20px;
}



#aboutheader {
  margin-left: 30px;
}

  header {
    flex-direction: row;        /* keep header items in a row */
    align-items: center;
    padding: 0.5rem 0rem; 
    margin-left: 0px;     /* adjust to match existing mobile padding */
  }

  /* Ensure logo doesn't stack / float */
  .logo {
    margin-top: 0 !important;
    margin-left: 0px !important;
    display: flex;
    vertical-align: middle;
    scale: .9;
  }

  /* Force nav to show as horizontal inline list */
  nav {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-left: -10px;
    margin-right: 95px; /* moves links left */
    font-size: .1rem;
  }

  /* If your .btn-signing is hidden on small screens, show it */
  .btn-signing {
    display: none;
  }

#about-intro {
  margin-bottom: -250px;
}

  .navhome {
    display: none;
  }

}

@media (min-width: 541px) and (max-width:600px) {
.projects-hero2 {
  margin-top: -610px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}

#servicesheader {
  margin-left: 35px;
display: flex;
justify-content: center; /* centers horizontally */
align-items: center;     /* centers vertically */
}

#services .intro-block img {
  margin-bottom: -30px;
}

 #services-intro .content h1{
  margin-top: -40px;
  margin-left: 10px;
  font-size: 3.5rem;
  margin-bottom: -40px;
}

#services-intro .content p{
  margin-top: 70px;
  margin-left: 10px;
  font-size: 1.3rem;
}


#services {
margin-top: -170px;
}

#services .project-content img {
  scale: .4;
margin-right: -205px;
margin-top: 70px;
}

#services .project-content h2 {
font-size: 2.5rem;
text-align: center;
margin-top: -150px;
}


#services .project-content p {
font-size: 1rem;
text-align: center;
}


#services .details-main h3 {
font-size: 3rem;
text-align: center;
}

#services .details-main ul {
font-size: 1rem;
text-align: left;
}

#services .details-main li {
font-size: 1rem;
margin-bottom: 20px;
}


#services .details-main .btn-signing {
display: block;
margin-top: -70px;
}



#services .closing-paragraph {
  margin-top: 20px;
}


#aboutheader {
  margin-left: 30px;
}

header {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0rem;
    margin-left: 10px;
  }


  .logo {
    margin-top: 0 !important;
    margin-left: 0px !important;
    display: flex;
    vertical-align: middle;
    scale: .9;
  }


  nav {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-left: -10px;
    margin-right: 95px;
    font-size: .1rem;
  }

  .btn-signing {
    display: none;
  }

  .navprojects {
    display: none;
  }

  #about-title {
  margin-top: -90px;
  margin-left: 11px;
  font-size: 3.5rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .5;
  margin-right: -35px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1rem;
 text-align: center;
 max-width: 350px;
}

#about .project-content .details-block h3 {
 font-size: 2.2rem;
  max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1rem;
 max-width: 350px;
}
}

@media (min-width: 501px) and (max-width:539px) {
.projects-hero2 {
  margin-top: -580px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}

#servicesheader {
  margin-left: 35px;
display: flex;
justify-content: center; /* centers horizontally */
align-items: center;     /* centers vertically */
}

#services .intro-block img {
  margin-bottom: -30px;
}

 #services-intro .content h1{
  margin-top: -40px;
  margin-left: 10px;
  font-size: 3.5rem;
  margin-bottom: -40px;
}

#services-intro .content p{
  margin-top: 70px;
  margin-left: 10px;
  font-size: 1.3rem;
}


#services {
margin-top: -170px;
}

#services .project-content img {
  scale: .4;
margin-right: -205px;
margin-top: 70px;
}

#services .project-content h2 {
font-size: 2.5rem;
text-align: center;
margin-top: -150px;
}


#services .project-content p {
font-size: 1rem;
text-align: center;
}


#services .details-main h3 {
font-size: 3rem;
text-align: center;
}

#services .details-main ul {
font-size: 1rem;
text-align: left;
}

#services .details-main li {
font-size: 1rem;
margin-bottom: 20px;
}


#services .details-main .btn-signing {
display: block;
margin-top: -70px;
}



#services .closing-paragraph {
  margin-top: 20px;
}


#aboutheader {
  margin-left: 30px;
}

header {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0rem;
    margin-left: 10px;
  }


  .logo {
    margin-top: 0 !important;
    margin-left: 0px !important;
    display: flex;
    vertical-align: middle;
    scale: .9;
  }


  nav {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-left: -10px;
    margin-right: 95px;
    font-size: .1rem;
  }

  .btn-signing {
    display: none;
  }

  .navprojects {
    display: none;
  }

  #about-title {
  margin-top: -90px;
  margin-left: 11px;
  font-size: 3.5rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .5;
  margin-right: -35px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1rem;
 text-align: center;
 max-width: 350px;
}

#about .project-content .details-block h3 {
 font-size: 2.2rem;
  max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1rem;
 max-width: 350px;
}
}


@media (min-width: 461px) and (max-width:500px) {
.projects-hero2 {
  margin-top: -550px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}

#servicesheader {
  margin-left: 35px;
display: flex;
justify-content: center; /* centers horizontally */
align-items: center;     /* centers vertically */
}

#services .intro-block img {
  margin-bottom: -30px;
}

 #services-intro .content h1{
  margin-top: -40px;
  margin-left: 10px;
  font-size: 3.5rem;
  margin-bottom: -40px;
}

#services-intro .content p{
  margin-top: 70px;
  margin-left: 10px;
  font-size: 1.3rem;
}


#services {
margin-top: -170px;
}

#services .project-content img {
  scale: .4;
margin-right: -205px;
margin-top: 70px;
}

#services .project-content h2 {
font-size: 2.5rem;
text-align: center;
margin-top: -150px;
}


#services .project-content p {
font-size: 1rem;
text-align: center;
}


#services .details-main h3 {
font-size: 3rem;
text-align: center;
}

#services .details-main ul {
font-size: 1rem;
text-align: left;
}

#services .details-main li {
font-size: 1rem;
margin-bottom: 20px;
}


#services .details-main .btn-signing {
display: block;
margin-top: -70px;
}



#services .closing-paragraph {
  margin-top: 20px;
}


#aboutheader {
  margin-left: 30px;
}

header {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0rem;
    margin-left: 10px;
  }


  .logo {
    margin-top: 0 !important;
    margin-left: 0px !important;
    display: flex;
    vertical-align: middle;
    scale: .9;
  }


  nav {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-left: -10px;
    margin-right: 95px;
    font-size: .1rem;
  }

  .btn-signing {
    display: none;
  }

  .navprojects {
    display: none;
  }

  #about-title {
  margin-top: -90px;
  margin-left: 11px;
  font-size: 3.5rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .5;
  margin-right: -35px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1rem;
 text-align: center;
 max-width: 350px;
}

#about .project-content .details-block h3 {
 font-size: 2.2rem;
  max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1rem;
 max-width: 350px;
}
}


@media (min-width: 415px) and (max-width:460px) {
.projects-hero2 {
  margin-top: -510px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}

#servicesheader {
  margin-left: 35px;
display: flex;
justify-content: center; /* centers horizontally */
align-items: center;     /* centers vertically */
}

#services .intro-block img {
  margin-bottom: -30px;
}

 #services-intro .content h1{
  margin-top: -40px;
  margin-left: 10px;
  font-size: 3.5rem;
  margin-bottom: -40px;
}

#services-intro .content p{
  margin-top: 70px;
  margin-left: 10px;
  font-size: 1.3rem;
}


#services {
margin-top: -170px;
}

#services .project-content img {
  scale: .4;
margin-right: -205px;
margin-top: 70px;
}

#services .project-content h2 {
font-size: 2.5rem;
text-align: center;
margin-top: -150px;
}


#services .project-content p {
font-size: 1rem;
text-align: center;
}


#services .details-main h3 {
font-size: 3rem;
text-align: center;
}

#services .details-main ul {
font-size: 1rem;
text-align: left;
}

#services .details-main li {
font-size: 1rem;
margin-bottom: 20px;
}


#services .details-main .btn-signing {
display: block;
margin-top: -70px;
}



#services .closing-paragraph {
  margin-top: 20px;
}


#aboutheader {
  margin-left: 30px;
}

header {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0rem;
    margin-left: 10px;
  }


  .logo {
    margin-top: 0 !important;
    margin-left: 0px !important;
    display: flex;
    vertical-align: middle;
    scale: .9;
  }


  nav {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-left: -10px;
    margin-right: 95px;
    font-size: .1rem;
  }

  .btn-signing {
    display: none;
  }

  .navprojects {
    display: none;
  }

  #about-title {
  margin-top: -90px;
  margin-left: 11px;
  font-size: 3.5rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .5;
  margin-right: -35px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1rem;
 text-align: center;
 max-width: 350px;
}

#about .project-content .details-block h3 {
 font-size: 2.2rem;
  max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1rem;
 max-width: 350px;
}
}

@media (min-width: 391px) and (max-width: 414px) {
.projects-hero2 {
  margin-top: -250px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}

#servicesheader {
  margin-left: 35px;
display: flex;
justify-content: center; /* centers horizontally */
align-items: center;     /* centers vertically */
}

#services .intro-block img {
  margin-bottom: -30px;
}

 #services-intro .content h1{
  margin-top: -40px;
  margin-left: 10px;
  font-size: 3.5rem;
  margin-bottom: -40px;
}

#services-intro .content p{
  margin-top: 70px;
  margin-left: 10px;
  font-size: 1.3rem;
}


#services {
margin-top: -170px;
}

#services .project-content img {
  scale: .4;
margin-right: -205px;
margin-top: 70px;
}

#services .project-content h2 {
font-size: 2.5rem;
text-align: center;
margin-top: -150px;
}


#services .project-content p {
font-size: 1rem;
text-align: center;
}


#services .details-main h3 {
font-size: 3rem;
text-align: center;
}

#services .details-main ul {
font-size: 1rem;
text-align: left;
}

#services .details-main li {
font-size: 1rem;
margin-bottom: 20px;
}


#services .details-main .btn-signing {
display: block;
margin-top: -70px;
}



#services .closing-paragraph {
  margin-top: 20px;
}


#aboutheader {
  margin-left: 30px;
}

header {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0rem;
    margin-left: 10px;
  }


  .logo {
    margin-top: 0 !important;
    margin-left: 0px !important;
    display: flex;
    vertical-align: middle;
    scale: .9;
  }


  nav {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-left: -10px;
    margin-right: 95px;
    font-size: .1rem;
  }

  .btn-signing {
    display: none;
  }

  .navprojects {
    display: none;
  }

  #about-title {
  margin-top: -90px;
  margin-left: 11px;
  font-size: 3.5rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .5;
  margin-right: -35px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1rem;
 text-align: center;
 max-width: 350px;
}

#about .project-content .details-block h3 {
 font-size: 2.2rem;
  max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1rem;
 max-width: 350px;
}
}

@media  (max-width: 767px) {
  header {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0rem;
  }

  .logo {
    margin-top: 0 !important;
    margin-left: 0px !important;
    display: flex;
    vertical-align: middle;
    scale: .9;
  }

  nav {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-left: -10px;
    margin-right: 95px;
    font-size: .1rem;
  }

  .btn-signing {
    display: none;
  }

.navhome {
    display: none;
  }

  .navprojects {
    display: none;
  }
}

@media (min-width: 373px) and (max-width:389px) {
.projects-hero2 {
  margin-top: -570px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;
  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}

 #servicesheader {
  margin-left: 10px;
display: flex;
justify-content: center; /* centers horizontally */
align-items: center;     /* centers vertically */
}

#services .intro-block img {
  margin-bottom: -30px;
}

 #services-intro .content h1{
  margin-top: 70px;
  margin-left: 10px;
  font-size: 3.5rem;
  margin-bottom: -40px;
}

#services-intro .content p{
  margin-top: 70px;
  margin-left: 10px;
  font-size: 1.3rem;
}


#services {
margin-top: -50px;
}

#services .project-content img {
  scale: .4;
margin-right: -220px;
margin-top: 70px;
}

#services .project-content h2 {
font-size: 2.5rem;
text-align: center;
margin-top: -150px;
}


#services .project-content p {
font-size: 1rem;
text-align: center;
}


#services .details-main h3 {
font-size: 3rem;
text-align: center;
}

#services .details-main ul {
font-size: 1rem;
text-align: left;
}

#services .details-main li {
font-size: 1rem;
margin-bottom: 20px;
}


#services .details-main .btn-signing {
display: block;
margin-top: -70px;
}



#services .closing-paragraph {
  margin-top: 20px;
}

 
  #aboutheader {
  margin-left: 10px;
}
 header {
    flex-direction: row;
    align-content: center;
    padding: 0.5rem 0rem;
    margin-left: -30px;
  }

  .logo {
    margin-top: 0 !important;
    margin-left: 15px !important;
    display: flex;
    vertical-align: middle;
    scale: .9;
  }

  nav {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-left: -20px;
    margin-right: 95px;
    font-size: .1rem;
  }

  .btn-signing {
    display: none;
  }

  .navhome {
    display: none;
  }

  .navprojects {
    display: none;
  }

  #about-title {
  margin-top: 70px;
  margin-left: 0;
  font-size: 3.3rem;
}

#about-intro {
  margin-bottom: -90px;
}

#about img {
  scale: .5;
  margin-right: -45px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1rem;
 text-align: center;
 max-width: 350px;
}

#about .project-content .details-block h3 {
 font-size: 2.2rem;
  max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1rem;
 max-width: 350px;
}
}

@media (min-width: 359px) and (max-width:360px) {
#services-intro .subhead {
  font-size: 1rem !important;
 margin-top: 70px !important;
}

.projects-hero2 {
  margin-top: -330px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}


/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}
#aboutheader {
  margin-left: 30px;
}

  header {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0rem;
    margin-left: -20px;
  }

  .logo {
    margin-top: 0 !important;
    margin-left: 0px !important;
    display: flex;
    vertical-align: middle;
    scale: .85;
  }

  nav {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-left: -20px;
    margin-right: 95px;
    font-size: .1rem;
  }

  .btn-signing {
    display: none;
  }

   .navhome {
    display: none;
  }

  .navprojects {
    display: none;
  }

   #about-title {
  margin-top: -0px;
  margin-left: 10px;
  font-size: 3rem;
}

#about-intro {
  margin-bottom: -150px;
}

#about img {
  scale: .5;
  margin-right: -50px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 3.7rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1rem;
 text-align: center;
 max-width: 350px;
}

#about .project-content .details-block h3 {
 font-size: 2rem;
  max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1rem;
 max-width: 350px;
}


#services .details-main .btn-signing {
display: block;
margin-top: -70px;
}

#services-intro .content h1 {
  margin-top: 10px;
}

#services-intro .content p {
  margin-top: 40px;
  font-size: 1.2rem;
}

#services .closing-paragraph {
  margin-top: 20px;
}

  
}

@media (min-width: 429px) and (max-width:430px) {
.projects-hero2 {
  margin-top: -470px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}

  #aboutheader {
  margin-left: 0px;
}
  header {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0rem;
    margin-left: -30px;
  }

  .logo {
    margin-top: 0 !important;
    margin-left: 20px !important;
    display: flex;
    vertical-align: middle;
    scale: .85;
  }

  nav {
    display: flex !important;
    gap: 2rem;
    align-items: center;
    margin-left: -15px;
    margin-right: 95px;
    font-size: .1rem;
  }

  .btn-signing {
    display: none;
  }

   .navhome {
    display: none;
  }

  .navprojects {
    display: none;
  }

  #about-title {
  margin-top: -100px;
  margin-left: 10px;
  font-size: 3.5rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .5;
  margin-right: -20px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1.2rem;
 text-align: center;
 max-width: 350px;
}

#about .project-content .details-block h3 {
 font-size: 2.2rem;
  max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1.2rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1.2rem;
 max-width: 350px;
}

#servicesheader {
  margin-left: 10px;
display: flex;
justify-content: center; /* centers horizontally */
align-items: center;     /* centers vertically */
}

 #services-intro .content h1{
  margin-top: -80px;
  margin-left: 20px;
  font-size: 3.5rem;
  margin-bottom: -40px;
}

#services-intro .content p{
  margin-top: 70px;
  margin-left: 20px;
  font-size: 1.5rem;
}


#services {
margin-top: -200px;
}

#services .project-content img {
  scale: .45;
margin-right: -195px;
margin-top: -70px;
margin-bottom: -25px;
}

#services .project-content h2 {
font-size: 3rem;
text-align: center;
}

#services .project-content p {
font-size: 1.2rem;
text-align: center;
}


#services .details-main h3 {
font-size: 3rem;
text-align: center;
}

#services .details-main ul {
font-size: 1.2rem;
text-align: left;
}

#services .details-main li {
font-size: 1.2rem;
margin-bottom: 20px;
}

#services .details-main .btn-signing {
display: block;
margin-top: -70px;
}



#services .closing-paragraph {
  margin-top: 20px;
}


}

@media (max-width: 389px) {

  .projects-hero2 {
  margin-top: -270px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}

  #servicesheader {
  margin-left: 25px;
display: flex;
justify-content: center; /* centers horizontally */
align-items: center;     /* centers vertically */
}

 #services-intro .content h1{
  margin-top: -50px;
  margin-left: 0px;
  font-size: 3rem;
  margin-bottom: -40px;
}

#services-intro .content p{
  margin-top: 70px;
  margin-left: 0px;
  font-size: 1.2rem;
}


#services {
margin-top: -180px;
}

#services .project-content img {
  scale: .35;
margin-right: -230px;
margin-top: 60px;
margin-bottom: -50px;
}

#services .project-content h2 {
font-size: 2.5rem;
text-align: center;
}

#services .project-content p {
font-size: 1rem;
text-align: center;
}


#services .details-main h3 {
font-size: 2.5rem;
text-align: center;
}

#services .details-main ul {
font-size: 1rem;
text-align: left;
}

#services .details-main li {
font-size: 1rem;
margin-bottom: 20px;
}


#services .details-main .btn-signing {
display: block;
margin-top: -70px;
}



#services .closing-paragraph {
  margin-top: 20px;
}


#aboutheader {
  margin-left: 0px;
}

    header {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0rem;
    margin-left: -25px;
  }

  .logo {
    margin-top: 0 !important;
    margin-left: 0px !important;
    display: flex;
    vertical-align: middle;
    scale: .85;
  }

  .black-rectangle{
    margin-top: 10px;
  }

  nav {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-left: -30px;
    margin-right: 95px;
    font-size: .1rem;
  }

  .btn-signing {
    display: none;
  }

   .navhome {
    display: none;
  }

  .navprojects {
    display: none;
  }

    .btn-signing {
        display: none;
    }
    .logo {
      scale: .8;
        margin-top: 0px;
    }
    .content {
        margin-top: 22rem;
        max-width: 95%;
    }
    .content h1 {
        margin-left: clamp(-20px, -2vw, 0);
        margin-top: -10px;
        font-size: clamp(1.6rem, 4vw, 2.2rem);
        pointer-events: none;
    }
    .description {
        margin-top: -15px;
        margin-left: -20px;
        font-size: 0.9rem;
        margin-bottom: -30px;
    }
    .robot-3d {
        margin-top: -85px;
        scale: 0.8;
    }
    #blackrock {
        padding: 2rem 1rem;
    }
    .cards-gallery img {
        max-width: 100%;
    }
    .buttons {
        flex-direction: column;
        margin-left: -25px;
    }
    .btn-get-started,
    .btn-signing-main {
        font-size: 0.8rem;
    }

    
  #about-title {
  margin-top: -100px;
  margin-left: 10px;
  font-size: 2.8rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .5;
  margin-right: -60px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about .project-content .intro-block h2 {
 font-size: 3rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1rem;
 text-align: center;
 max-width: 350px;
 margin-top: -5px;
}

#about .project-content .details-block h3 {
 font-size: 2.2rem;
  max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1rem;
 max-width: 350px;
}
}

@media (width: 393px) {
  #about-intro h1 {
    font-size: 3.4rem;
  }
}

@media (max-width: 900px) {
  .hero-video, .video-wrapper, video, iframe { 
    pointer-events: none !important;
  }

  .contact-form {
    pointer-events: visible;
  }
}

@media (width: 768px) {
  .projects-hero .content h1 {
    font-size: 6rem !important;
  }

  .navhome {
    display: none;
  } 
}

@media (width: 540px) {

   #about-title {
  margin-top: -20px;
  margin-left: 10px;
  font-size: 3.5rem;
}

#about-intro {
  margin-bottom: -250px;
}

#about img {
  scale: .5;
  margin-right: 20px;
  margin-top: -80px;
  margin-bottom: -50px;
}

#about {
margin-top: 80px !important;
}

#about .project-content .intro-block h2 {
 font-size: 4rem;
 text-align: center;
}

#about .project-content .intro-block p {
 font-size: 1.2rem;
 text-align: center;
 max-width: 460px;
 margin-left: 0px;
}

#about .project-content .details-block h3 {
 font-size: 2.2rem;
  max-width: 300px;
}

#about .project-content .details-block p {
 font-size: 1.2rem;
 text-align: right;
 max-width: 350px;
}

#about .project-content .details-block ul {
 font-size: 1.2rem;
 max-width: 350px;
}


    .projects-hero2 {
  margin-top: -650px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  font-family: "Poppins", sans-serif;
}

.projects-hero2 .content h1 {
  font-size: 3rem;
}

.projects-hero2 .content {
  max-width: fit-content;
  align-content: center;
  margin-left: 265px;
}

/* CONTACT FORM STYLES */
.contact-form {

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;

  margin: 0 auto;           /* centers horizontally */
  display: block;
  max-width: 1000px;         /* keeps form narrow and neat */
  width: 100%;  
  margin-bottom: 2.5rem;
  margin-top: 40px;
  margin-left: 5px;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}
#servicesheader {
  margin-left: 35px;
display: flex;
justify-content: center; /* centers horizontally */
align-items: center;     /* centers vertically */
}

#services .intro-block img {
  margin-bottom: -30px;
}

 #services-intro .content h1{
  margin-top: 0px;
  margin-left: 10px;
  font-size: 4.5rem;
  margin-bottom: -55px;
}

#services-intro .content p{
  margin-top: 70px;
  margin-left: 10px;
  font-size: 1.3rem;
}


#services {
margin-top: -130px;
}

#services .project-content img {
  scale: .6;
margin-right: -150px;
margin-top: 100px;
}

#services .project-content h2 {
font-size: 3.5rem;
text-align: center;
margin-top: -150px;
}


#services .project-content p {
font-size: 1rem;
text-align: center;
}


#services .details-main h3 {
font-size: 3rem;
text-align: center;
}

#services .details-main ul {
font-size: 1rem;
text-align: left;
}

#services .details-main li {
font-size: 1rem;
margin-bottom: 20px;
}


#services .details-main .btn-signing {
display: block;
margin-top: -70px;
}



#services .closing-paragraph {
  margin-top: 20px;
}



#aboutheader {
  margin-left: 30px;
}

  header {
    flex-direction: row;        /* keep header items in a row */
    align-items: center;
    padding: 0.5rem 0rem; 
    margin-left: 0px;     /* adjust to match existing mobile padding */
  }

  /* Ensure logo doesn't stack / float */
  .logo {
    margin-top: 0 !important;
    margin-left: 0px !important;
    display: flex;
    vertical-align: middle;
    scale: .9;
  }

  /* Force nav to show as horizontal inline list */
  nav {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-left: -10px;
    margin-right: 95px; /* moves links left */
    font-size: .1rem;
  }

  /* If your .btn-signing is hidden on small screens, show it */
  .btn-signing {
    display: none;
  }

#about-intro {
  margin-bottom: -250px;
}


  .navhome {
    display: none;
  }

}