/* Global Reset and Font */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: black;
}
body {
  font-family: "AvertaCY", sans-serif;
}

/* Set 100% size and prevent horizontal scroll */
html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Prevent side scroll */
  scrollbar-width: none; /* Firefox: hide scrollbar */
  -ms-overflow-style: none; /* IE/Edge: hide scrollbar */
  scroll-behavior: smooth;
  /* background-color: black; */
}

/* Chrome, Edge, Safari: hide scrollbar */
body::-webkit-scrollbar {
  display: none;
}

#nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem 2rem;
  background: white;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#navRight {
  display: flex;
  gap: 2rem;
}

/* Base nav link (no underline on hover) */
.nav-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: black;
  font-weight: 500;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2em;
  padding-bottom: 30px; /* adds space between text and underline */
}

/* Slide text on hover only */
.nav-link span {
  display: block;
  transition: transform 0.3s ease;
}

.nav-link span:first-child {
  transform: translateY(0%);
}

.nav-link span:last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
}

.nav-link:hover span:first-child {
  transform: translateY(-100%);
}

.nav-link:hover span:last-child {
  transform: translateY(0%);
}

/* Underline only for active link with animation */
@keyframes underlineGrow {
  from {
    transform: translateX(-50%) scaleX(0);
  }
  to {
    transform: translateX(-50%) scaleX(1);
  }
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: black;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}

/* Animate only on the active link */
.nav-link.active::after {
  animation: underlineGrow 0.4s ease forwards;
}

@font-face {
  font-family: "AvertaCY";
  src: url("../fonts/AvertaCY-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "AvertaCY";
  src: url("../fonts/AvertaCY-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "AvertaCY";
  src: url("../fonts/AvertaCY-Semibold.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "AvertaCY";
  src: url("../fonts/AvertaCY-Bold.ttf") format("truetype");
  font-weight: 700;
}

/* Matter Fonts */
@font-face {
  font-family: "Matter";
  src: url("../fonts/matter-regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Matter";
  src: url("../fonts/matter-light.ttf") format("truetype");
  font-weight: 300;
}

#hero {
  width: 100%;
  height: 55vh;
  background-color: white;
  /* border: 2px solid red; */
}
#nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2vh 15vw;
}
#navLeft a img {
  width: 125px;
}
#navRight {
  display: flex;
  align-items: center;
  gap: 30px;
}
#navRight a {
  font-weight: 500;
  font-size: 22px;
  text-decoration: none;
  color: black;
  font-family: "AvertaCY", sans-serif;
  /* letter-spacing: 1px; */
}
#navRight i {
  font-size: 30px;
}
#heroHeading {
  height: 50vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-color: rgb(228, 20, 20); */
}
#headingText {
  text-align: center;
  display: flex;
  gap: 2vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 160px;
}
#headingText h2 {
  font-size: 4.5vw;
  width: 52vw;
}
#headingText h4 {
  font-size: 1.2vw;
  font-weight: 400;
  width: 40vw;
}
#heroVideo {
  display: flex;
  align-items: center;
  justify-content: center;
}
#heroInformation {
  width: 70vw;
  height: 90vh; /* optional: full screen height */
  overflow: hidden;
  position: relative;
  padding-top: 10vh;
}

#heroInformation video {
  border-radius: 1vw;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
  border: none;
}
#companyInfo {
  width: 100vw;
  height: 50vh;
  display: flex;
  gap: 5vw;
  align-items: center;
  justify-content: space-between;
  padding: 5vh 20vw;
}
#companyInfoVideo {
  width: 20vw;
}
#companyInfoVideo video {
  width: 20vw;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
#companyInfoText {
  width: 50vw;
  /* height: 100%; */
  font-size: 1.5vw;
  display: flex;
  gap: 5vh;
  flex-direction: column;
}
#companyInfoText h4 {
  font-weight: 500;
  width: 35vw;
}
#companyInfoText a button {
  width: 12vw;
  height: 10vh;
  font-size: 1.5vw;
  background-color: white;
  border-radius: 15vw;
  margin-right: 5vw;
  border: 1.5px solid black;
}

#featuredProjectMain {
  background-color: #161616;
  border-top-left-radius: 5vw;
  border-top-right-radius: 5vw;
}
#featuredProjectHeading {
  padding: 20vh 18vw;
}
#featuredProjectHeadingText {
  font-family: "Matter", sans-serif !important;
  color: white;
  font-size: 9vw;
  font-weight: 400;
}
#FPText video {
  border-radius: 110px;
  height: 180px;
}
#FPText {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  gap: 20px;
}
#FPText p {
  font-family: "Roboto Flex", sans-serif;
  font-variation-settings: "wght" 400, "slnt" -10;
  letter-spacing: 2px;
  font-size: 9.5vw;
}

.video-hover-container {
  position: relative;
  width: 100%; /* responsive */
  max-width: 30vw;
  height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  border-radius: 3vw;
}

.video-thumbnail,
.video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.video-preview {
  display: none;
}

#featuredProjectContent {
  padding: 1vh 12vw;
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: 1vw; */
}
#featuredProjectContentleft {
  width: 34vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10vh;
}
#featuredProjectContentright {
  width: 34vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10vh;
  margin-top: 40vh;
}

#projectsButton {
  display: flex;
  justify-content: center;
}
#projectsButton button {
  padding: 2vh 3vw;
  color: white;
  background-color: #161616;
  border: 1.5px solid white;
  border-radius: 3vw;
  font-size: 1.5vw;
  margin-top: 5vh;
}

.featuredContentBox1 {
  width: 30vw;
  height: 40vw;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.featuredContentBox1text p {
  color: white;
  font-size: 1.5vw;
  width: 24vw;
}
.featuredContentBox1text p span {
  font-weight: bold;
}
#extraSpace {
  margin-top: 20vh;
  width: 100vw;
  height: 20vh;
  background-color: white;
  border-top-right-radius: 5vw;
  border-top-left-radius: 5vw;
}

#ourPhilosophyHeading {
  padding: 10vh 12vw;
}
#ourtext {
  font-size: 10vw;
}
#philosophytext {
  font-size: 12vw;
  font-family: "Roboto Flex", sans-serif;
  font-variation-settings: "wght" 400, "slnt" -10;
  letter-spacing: 4px;
  font-weight: 400;
  line-height: 110px;
}

#ourPhilosophyInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20vh 18vw;
}
#ourPhilosophyVideo video {
  width: 25vw;
}
#ourPhilosophyText {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#ourPhilosophyText p {
  font-size: 1.4vw;
  width: 34vw;
  font-weight: 500;
}
#ourPhilosophyText button {
  padding: 3vh 3vw;
  background-color: white;
  color: black;
  border: 1.5px solid black;
  border-radius: 3vw;
  width: fit-content;
  font-size: 1.5vw;
}

#dovelopentDesignResources {
  background-color: #161616;
  border-top-right-radius: 5vw;
  border-top-left-radius: 5vw;
}
#dovelopentDesignResourcesHeading {
  padding: 10vh 12vw;
  padding-top: 30vh;
  padding-bottom: 20vh;
  font-size: 8vw;
  color: white;
  line-height: 125px;
}
#resourcestext {
  font-family: "Roboto Flex", sans-serif;
  font-variation-settings: "wght" 400, "slnt" -10;
  font-size: 11vw;
}

#developmentDesignResourcesWrapper {
  padding: 10vh 12vw;
  display: flex;
  gap: 40px;
  background-color: #161616;
}
.card-group {
  display: flex;
  flex-direction: column;
  gap: 20vh;
}
.card {
  width: 35vw;
  height: 40vh;
}
.card img {
  border-radius: 2vw;
  width: 100%;
  height: 100%;
}
.card p {
  color: white;
  font-size: 1vw;
  width: 35vw;
  margin-top: 20px;
}
#cardgroup2 {
  margin-top: 20vh;
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

#developmentDesignResourcesInfo {
  padding: 10vh 15vw;
  display: flex;
  align-items: center;
  justify-content: right;
}
#developmentDesignResourcesInfo p {
  color: white;
  font-size: 1.5vw;
  font-weight: 500;
}
.DDRIText {
  width: 30vw;
  display: flex;
  flex-direction: column;
}
.DDRIText button {
  padding: 8px 24px;
  background-color: #161616;
  border: 1px solid white;
  color: white;
  font-size: 1.5vw;
  border-radius: 2vw;
  width: fit-content;
  margin-top: 30px;
}

#ourServices {
  background-color: white;
}
#ourServicesMain {
  padding: 2vh 20vw;
}
#ourServicesHeading p {
  font-size: 5vw;
  color: black;
  font-weight: 600;
}

#ourServicesContent {
  display: flex;
  justify-content: space-between;
}
.ourServicesContentBox {
  width: 28vw;
  height: 40vw;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
#ourServicesContentright .ourServicesContentBox {
  height: 35vw;
}
.ourServicesContentBox h3 {
  font-size: 1.5vw;
}
.ourServicesContentBox p {
  font-size: 1.2vw;
}
#ourServicesContentleft {
  width: 25vw;
  display: flex;
  flex-direction: column;
  gap: 12vh;
  margin-top: 10vh;
}
#ourServicesContentright {
  margin-top: 18vh;
  display: flex;
  flex-direction: column;
  gap: 8vh;
}
#ourServicesContentLeftHeading {
  font-size: 1.4vw;
  font-weight: 500;
  width: 24vw;
  line-height: 30px;
}
#ourServicesButton {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
}
#ourServicesButton button {
  padding: 25px 50px;
  color: black;
  background-color: white;
  border: 1.5px solid black;
  border-radius: 50px;
  font-size: 1.3vw;
  margin-bottom: 100px;
}
#blogSection {
  background-color: black;
  border-top-right-radius: 5vw;
  border-top-left-radius: 5vw;
}
#blogSectionMain {
  padding: 5vh 20vw;
}
#blogSectionHeading {
  font-size: 5vw;
  color: white;
  padding-top: 15vh;
  font-weight: 600;
}

#blogSectionContent {
  margin-top: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 5vh;
}
.blogSectionContentBox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
.blogSectionContentImage img {
  width: 25vw;
  border-radius: 1vw;
}
.blogSectionContentText {
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* align-items: center; */
  /* justify-content: space-between; */
}
.blogSectionContentText button {
  background-color: #161616;
  color: white;
  border-radius: 2vw;
  font-size: 0.8vw;
  border: 1px solid white;
  width: fit-content;
  padding: 4px 8px;
}
.blogSectionContentText .blogSectionContentInfo {
  width: 30vw;
  color: white;
  font-size: 2.2vw;
  font-weight: 600;
}
.blogSectionContentText .blogSectionContentDate {
  color: #808080;
  font-weight: 600;
}
#blogSectionButton {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
}
#blogSectionButton button {
  font-size: 1.2vw;
  color: white;
  background-color: black;
  border: 1.5px solid white;
  border-radius: 3vw;
  padding: 30px 60px;
}

.video-background-section {
  position: relative;
  width: 100%;
  height: 100vh; /* Full screen height */
  overflow: hidden;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Makes video cover the entire section */
  z-index: -1; /* Puts video behind content */
  pointer-events: none; /* Prevent any interaction */
}

.tellUsContent {
  position: relative;
  z-index: 1; /* Ensures text stays above video */
  color: white; /* Text color for contrast */
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.tellUsContent p {
  font-size: 6vw;
}
.tellUsContent button {
  font-size: 6vw;
  background-color: transparent;
  color: white;
  border: 1.5px solid white;
  border-radius: 5vw;
  padding: 20px 40px;
}

#footer {
  background-color: black;
}
#footerMain {
  padding: 10vh 15vw;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10vh;
  /* background-color: red; */
}
#footerMainLeft {
  display: flex;
  flex-direction: column;
  gap: 100px;
}
.InfoAddress {
  display: flex;
  gap: 90px;
}
.address1 {
  width: 15vw;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.address1 button {
  color: white;
  background-color: black;
  border: 1px solid white;
  border-radius: 2vw;
  padding: 10px 20px;
  font-size: 1.2vw;
  width: fit-content;
}
.address1 p {
  color: white;
  font-size: 1vw;
}
.address1 p span {
  color: #808080;
}

#privacyPolicyCuberto {
  display: flex;
  gap: 20px;
}
#privacyPolicy {
  color: white;
  font-size: 1.1vw;
}
#cuberto2025 {
  color: #808080;
  font-size: 1.1vw;
}

#footerMainRight {
  width: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: right;
}
.footerRightOptions {
  display: flex;
  gap: 40px;
  color: white;
  font-size: 1.5vw;
  justify-content: right;
}
.footerRightOptionsInfo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: right;
}

.footerRightOptionsInfo {
  text-align: right;
}

.footerRightOptionsInfo a {
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 40px; /* match your text height */
  color: white;
}

.footerRightOptionsInfo a span {
  display: block;
  transition: transform 0.3s ease;
}

/* Second text starts below */
.footerRightOptionsInfo a span:last-child {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  text-align: right;
}

/* Hover effect */
.footerRightOptionsInfo a:hover span:first-child {
  transform: translateY(-100%);
}
.footerRightOptionsInfo a:hover span:last-child {
  transform: translateY(-100%);
}

.socialMediaLinks {
  display: flex;
  justify-content: right;
  gap: 20px;
  margin-top: 60px;
}
.socialMediaLinks a svg {
  width: 65px;
  color: white;
  background-color: #1a1a1a;
  border-radius: 5vw;
  padding: 20px;
}

/* Our Services Main page start */
#ourServicesPageHeading {
  text-align: center;
  color: black;
  margin-top: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 220px;
}

#ourServicesPageHeading p {
  font-size: 1vw;
}
#ourServicesPageHeading h2 {
  font-weight: 600;
  font-size: 5vw;
  width: 40vw;
  line-height: 90px;
}
#ourServicesPageVideo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  margin-bottom: 100px;
}
#ourServicesPageVideo video {
  width: 70vw;
  border-radius: 1vw;
}
#ourServicesPageOurSolutionMain {
  padding: 2vh 20vw;
}
#ourSolutionHeading {
  font-size: 3vw;
  margin-bottom: 100px;
}
.ourSolutionContentMain {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 80px;
}
.ourSolutionContentLeft {
  width: 20vw;
}
.ourSolutionContentLeft p {
  text-transform: uppercase;
}
.ourSolutionContentRight {
  width: 28vw;
  margin-right: 50px;
}
.ourSolutionContentRight p {
  font-size: 1.5vw;
}
.ourSolutionContentRight button {
  padding: 25px 50px;
  background-color: white;
  color: black;
  border: 1.5px solid black;
  border-radius: 3vw;
  font-size: 1.2vw;
  margin-top: 50px;
  font-weight: 500;
}

.rope-container {
  width: 100%;
  height: 1px;
  border-top: 1px solid black;
}

#ourServicesWorkingWithUs {
  background-color: black;
  border-top-left-radius: 5vw;
  border-top-right-radius: 5vw;
}
#ourServicesWorkingWithUsMain {
  padding: 20vh 20vw;
  color: white;
}
#workingWithUsHeading {
  font-size: 3vw;
  width: 35vw;
  margin-bottom: 10vh;
}

.workingWithUsContentBox {
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  border-top: 1.5px solid #c9c9c9;
  padding-top: 5vh;
  margin-bottom: 10vh;
}
.workingWithUsContentLeft {
  width: 26.5vw;
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.workingWithUsContentLeft svg {
  width: 60px;
}
.workingWithUsContentLeft p {
  text-transform: uppercase;
  font-size: 0.7vw;
  font-weight: 600;
}
.workingWithUsContentRight {
  width: 26vw;
  font-size: 1.4vw;
  margin-right: 5vw;
  line-height: 30px;
}

.workingWithUsContentLeft svg {
  width: 80px; /* adjust as needed */
  height: 80px;
  animation: rotate2D 4s linear infinite;
}

@keyframes rotate2D {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* our projects page  */

#ourProjectsHeading {
  background-color: white;
  width: 100%;
}
#ourProjectsHeadingMain {
  padding: 8vh 20vw;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
}
#ourProjectsHeadingMain h2 {
  font-size: 5vw;
}
#ourProjectsHeadingMain p {
  font-size: 1.3vw;
}
.ourHeadingButtons {
  display: flex;
  gap: 60px;
  margin-top: 70px;
}
.ourHeadingButtons button {
  background-color: white;
  border: none;
  font-size: 1.4vw;
  font-weight: 400;
  cursor: pointer;
}

#projectShowcaseMain {
  padding: 0vh 15vw;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 300px;
}
#projectShowcaseLeft {
  width: 30vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
#projectShowcaseRight {
  width: 30vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 320px;
}

.projectShowcaseBox {
  width: 25vw;
  height: 50vh;
}
.projectShowcaseBox .video-hover-container img {
  border-radius: 5px !important ;
}

.projectShowcaseBoxtext {
  color: black;
  width: 20vw;
  margin-top: 30px;
}
.projectShowcaseBoxtext p {
  font-size: 1.1vw;
}
.projectShowcaseBoxtext p span {
  font-weight: 900;
}

.projectShowcaseBox {
  transition: transform 0.3s ease;
  transform-origin: center;
}

.projectShowcaseBox:hover {
  transform: scale(0.99); /* Slight shrink */
}

.video-hover-container {
  overflow: hidden; /* Hide image overflow when it scales */
}

.video-thumbnail {
  transition: transform 0.4s ease;
}

.projectShowcaseBox:hover .video-thumbnail {
  transform: scale(1.05); /* Zoom in on image */
}

.ourHeadingButtons {
  display: flex;
  gap: 1rem;
}

.ourHeadingButtons button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 16px;
  font-size: 1.2vw;
}

.ourHeadingButtons button .text {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  position: relative;
}

.ourHeadingButtons button .text span {
  display: block;
  transition: transform 0.4s ease;
}

.ourHeadingButtons button .text span:first-child {
  transform: translateY(0%);
}

.ourHeadingButtons button:hover .text span:first-child {
  transform: translateY(-100%);
}

.ourHeadingButtons button .text span:last-child {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(0%);
}

.ourHeadingButtons button:hover .text span:last-child {
  transform: translateY(-100%);
}

/* Black underline for active button */
.tab-button.active::after {
  content: "";
  position: absolute;
  bottom: 6px; /* Adjust to sit below text */
  left: 20%;
  width: 60%;
  height: 1.5px;
  background-color: #000;
  transition: width 0.3s ease;
}

#companyPageHeading {
  background-color: white;
}
#companyPageHeadingMain {
  padding: 20vh 15vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#companyPageHeadingMain h2 {
  font-size: 5vw;
  text-align: center;
}
#companyPageHeadingMain img {
  width: 100%;
  margin-top: 8vh;
  border-radius: 1vw;
}
#companyPageContent {
  background-color: white;
}
#companyPageContentMain {
  padding: 0vh 15vw;
}
#companyPageSection1 {
  padding: 0vh 5vw;
}
.companySec1 {
  display: flex;
  justify-content: space-between;
}
.companySec1Left {
  width: 10vw;
  font-size: 1vw;
  text-transform: uppercase;
}
.companySec1Right {
  width: 40vw;
  font-size: 1.5vw;
}
.companySec1Image {
  display: flex;
  justify-content: space-evenly;
  margin-top: 10vh;
}
.companySec1Image img {
  width: 45%;
  border-radius: 1vw;
  display: block;
}
.companySec1Image img:nth-child(1) {
  margin-bottom: 20vh;
}
.companySec1Image img:nth-child(2) {
  margin-top: 20vh;
}

#companyPageSection2 {
  padding: 20vh 5vw;
}
#companyPageSection2Heading {
  font-size: 4vw;
  font-weight: 800;
  width: 40vw;
}
.companyPageSection2Info {
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  margin-top: 50px;
  border-top: 2px solid #808080;
}
.companyPageSection2InfoLeft {
  width: 10vw;
  font-size: 0.8vw;
  text-transform: uppercase;
}
.companyPageSection2InfoRight {
  width: 38vw;
  font-size: 1.4vw;
  display: flex;
  gap: 50px;
  flex-direction: column;
  margin-right: 5vw;
}

.companyPageSection2InfoBottom {
  display: flex;
  gap: 50px;
}
.companyPageSection2InfoBottom p {
  font-size: 3.5vw;
}
.companyPageSection2InfoBottom h5 {
  font-size: 1vw;
  font-weight: 400;
}

.companyMainImage2 img {
  width: 100%;
  border-radius: 1vw;
}

#companyPageSection3 {
  padding: 20vh 5vw;
}
#companyPageSection3Heading h2 {
  font-size: 4vw;
  width: 40vw;
  letter-spacing: -2px;
}
.companyPageSection3Info {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  border-top: 2px solid #808080;
  padding-top: 50px;
}

.companyPageSection3InfoLeft {
  width: 10vw;
  font-size: 0.8vw;
  text-transform: uppercase;
}
.companyPageSection3InfoRight {
  width: 40vw;
  font-size: 1.6vw;
  margin-right: 5vw;
  letter-spacing: -1px;
}
.companyPageSection3InfoRight span {
  border-bottom: 1px solid black;
}
.companyMainVideo video {
  width: 100%;
  border-radius: 1vw;
}
#companyPageSection4 {
  padding: 20vh 5vw;
}
#companyPageSection4Heading p {
  font-size: 4.5vw;
  font-weight: 800;
  width: 35vw;
  line-height: 90px;
}
.companyLogoMain {
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin-top: 100px;
  margin-right: 80px;
}
.companyLogos {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.companyLogos img {
  width: 22%;
}

.companyFeedback {
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  margin-top: 200px;
  border-top: 2px solid #808080;
}
.companyFeedbackLeft {
  width: 8vw;
  text-transform: uppercase;
  font-size: 0.8vw;
}
.companyFeedbackRight {
  width: 40vw;
}
.companyFeedbackRight p:nth-child(1) {
  font-size: 1vw;
  text-transform: uppercase;
}
.companyFeedbackRight p:nth-child(2) {
  font-size: 1.4vw;
  width: 38vw;
  padding: 50px 0px;
}
.companyFeedbackRight button {
  padding: 8px 16px;
  border: 1px solid black;
  background-color: white;
  color: black;
  font-size: 1.5vw;
  border-radius: 2vw;
}
.companyFeedbackImage {
  display: flex;
  justify-content: space-evenly;
  margin-top: 150px;
}
.companyFeedbackImage img {
  width: 45%;
  border-top-left-radius: 1vw;
  border-top-right-radius: 1vw;
}
.companyFeedbackImage img:nth-child(1) {
  margin-bottom: 150px;
}
.companyFeedbackImage img:nth-child(2) {
  margin-top: 150px;
}
#companyPageWorkingWithUs {
  background-color: #161616;
  border-radius: 5vw;
}
.getToKnowUs {
  background-color: white;
  padding: 20vh 20vw;
}
.getToKnowUsHeading {
  font-size: 4vw;
  font-weight: 800;
  width: 30vw;
  line-height: 80px;
}
.getToKnowUsInfo {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  padding-top: 50px;
  border-top: 2px solid #808080;
}
.getToKnowUsLeft {
  width: 8vw;
  font-size: 0.8vw;
  text-transform: uppercase;
}
.getToKnowUsRight {
  width: 40vw;
  font-size: 1.4vw;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#blogContentBoxArea {
  background-color: white;
}
#blogContentBoxAreaMain {
  padding: 0vh 15vw;
  display: flex;
  justify-content: space-between;
  margin-bottom: 200px;
}
#blogContentBoxAreaMainLeft {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
#blogContentBoxAreaMainRight {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.blogContentBoxImage img {
  width: 100%;
  border-radius: 1vw;
}
.blogContentBoxText {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.blogContentBoxText button {
  padding: 4px 8px;
  width: fit-content;
  border: 1px solid black;
  background-color: white;
  color: black;
  border-radius: 2vw;
  font-size: 0.8vw;
  font-weight: 600;
  text-transform: uppercase;
}
.blogContentBoxText p:nth-child(2) {
  font-size: 2vw;
  font-weight: 600;
}
.blogContentBoxText p:nth-child(3) {
  font-size: 1vw;
  font-weight: 500;
  color: #808080;
}

.blogContentBox1 {
  display: inline-block;
  cursor: pointer;
  height: 600px;
}

.blogContentBoxImage {
  overflow: hidden; /* Keeps zoom inside rounded border */
  border-radius: 1vw;
  border: 4px solid transparent; /* Initial invisible border */
  transition: border 0.3s ease, transform 0.3s ease;
}

.blogContentBoxImage img {
  width: 100%;
  height: auto;
  border-radius: 1vw; /* Matches container so edges stay smooth */
  transition: transform 0.3s ease;
}

/* Hover effect */
.blogContentBox1:hover .blogContentBoxImage {
  border: 4px solid #ccc; /* Slight border on hover */
  transform: scale(0.97); /* Shrink border inward */
}

.blogContentBox1:hover .blogContentBoxImage img {
  transform: scale(1.05); /* Slight zoom in */
}

#contactPageHeading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5vw;
  margin-top: 20vh;
}
#contactPageHeading p {
  width: 34vw;
  text-align: center;
  font-weight: 800;
}

#contactPageInfo {
  padding: 10vh 15vw;
  font-size: 1.6vw;
  font-weight: 500;
}

.service-buttons {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 30px;
}

.button-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.service-btn {
  font-family: "AvertaCY", sans-serif;
  background-color: white;
  padding: 0px 20px;
  color: black;
  border: 1.5px solid black;
  border-radius: 2vw;
  font-size: 1.8vw;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
  outline: none;
}

.service-btn span {
  display: inline-block;
  position: relative;
  transition: transform 0.4s ease;
}

.service-btn span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover effect */
.service-btn:hover span {
  transform: translateY(-100%);
}

/* Active state */
.service-btn.active {
  background-color: black;
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .service-btn {
    font-size: 16px;
    border-radius: 25px;
  }
}

.contactForm {
  display: flex;
  gap: 100px;
  margin-top: 100px;
  flex-direction: column;
  width: 100%;
  background-color: white;
}

.contactForm input,
.contactForm textarea {
  font-family: "AvertaCY", sans-serif;
  width: 70%;
  border: none;
  border-bottom: 1px solid #808080;
  background-color: white;
  font-size: 1.5vw;
  padding: 10px 0;
  outline: none; /* remove default focus border */
  resize: none; /* no resizing for textarea */
}

.contactForm input:focus,
.contactForm textarea:focus {
  border-bottom-color: #555; /* subtle change on focus */
}

.projectBudget p {
  font-size: 1.5vw;
  margin-top: 100px;
  color: #000;
  font-weight: 600;
}
/* Project Budget Buttons Layout */
.projectBudgetButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

/* Button Base Style */
.projectBudgetButtons button {
  background-color: white;
  padding: 2px 20px;
  color: black;
  border: 1.5px solid black;
  border-radius: 2vw;
  font-size: 1.8vw;
  cursor: pointer;
  overflow: hidden; /* required for animation */
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Animation text span */
.projectBudgetButtons button span {
  display: inline-block;
  position: relative;
  transition: transform 0.4s ease;
}

/* Duplicate text for hover animation */
.projectBudgetButtons button span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
}

/* Hover effect */
.projectBudgetButtons button:hover span {
  transform: translateY(-100%);
}

/* Active / toggled style */
.projectBudgetButtons button.active {
  background-color: black;
  color: white;
}
.addAttachment {
  width: fit-content;
}
.addAttachment button {
  background-color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 100px;
  position: relative; /* needed for pseudo-element positioning */
  cursor: pointer;
}

/* SVG */
.addAttachment button svg {
  width: 30px;
  margin-right: 10px;
}

/* Text */
.addAttachment button p {
  width: 220px;
  font-size: 1.5vw;
  font-weight: 600;
  position: relative;
}

/* Underline animation */
.addAttachment button p::after {
  content: "";
  position: absolute;
  left: 0%;
  bottom: -5px; /* space below text */
  width: 100%;
  height: 2px;
  background-color: black;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* Hover effect */
.addAttachment button:hover p::after {
  transform: scaleX(1);
}

#sendRequest button {
  padding: 20px 40px;
  margin-left: 15vw;
  background-color: white;
  color: #808080;
  border: 1.5px solid #808080;
  font-size: 1.5vw;
  border-radius: 2vw;
}
#sendRequest p {
  font-size: 0.8vw;
  color: #555;
  margin-left: 15vw;
  margin-top: 5vh;
  margin-bottom: 200px;
  width: 19vw;
}
#sendRequest p span {
  color: black;
  font-weight: 600;
}

.boxArea1 {
  display: flex;
  width: 1000px;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
}

/* --- UNIVERSAL BUTTON FILL EFFECT --- */

/* Base style for any button with the .btn class */
.btn {
  position: relative;
  overflow: hidden;
  z-index: 1;

  /* Common styling from your project */
  width: fit-content;
  font-family: "AvertaCY", sans-serif;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;

  /* Default transition */
  transition: color 0.4s ease-in-out;
}

/* The pseudo-element for the filling animation */
.btn::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
  transition: height 0.4s ease-in-out;
}

/* Triggers the animation on hover */
.btn:hover::before {
  height: 100%;
}

/* --- VARIATION 1: White button fills with Black --- */
.btn.btn-fill-black {
  background-color: white;
  color: black;
  border: 1.5px solid black;
}

.btn.btn-fill-black::before {
  background-color: black;
}

.btn.btn-fill-black:hover {
  color: #ffffff !important;
}

/* --- VARIATION 2: Black button fills with White --- */
.btn.btn-fill-white {
  background-color: black; /* Using your project's black */
  color: white;
  border: 1.5px solid white;
}

.btn.btn-fill-white::before {
  background-color: #ffffff;
}

.btn.btn-fill-white:hover {
  color: #111827 !important; /* Force text color change */
}

/* --- Special override for the "TELL US" button --- */
.tellUsContent .btn.btn-fill-white {
  background-color: transparent;
}

.projectShowcaseBox {
  width: 28vw;
  height: 78vh;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.project-image-container {
  overflow: hidden;
  border-radius: 1vw;
  transition: border-width 0.3s ease;
  height: 70%; /* Adjust based on your layout */
  position: relative;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(3vw - 4px);
  transition: transform 0.3s ease;
}

.projectShowcaseBoxtext {
  padding: 1rem 0;
  /* text-align: center; */
}

/* Hover Effects */
.projectShowcaseBox:hover .project-image {
  transform: scale(1.05); /* Image zooms in */
}

.projectShowcaseBox:hover .project-image-container {
  border-width: 2px; /* Border shrinks */
}

/* Optional: Add subtle lift effect */
.projectShowcaseBox:hover {
  transform: translateY(-3px);
}

/* Preloader overlay */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0f0f0f; /* dark background */
  z-index: 9999;
}

.hamburger {
  font-size: 30px;
  margin-right: 10px;
}
.menuOverlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px); /* glass effect */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* header, links, footer */
  padding: 2rem;
  transform: translateX(100%);
  transition: transform 0.6s ease-in-out; /* was 0.3s */
  z-index: 1000;
}

/* Show overlay */
.menuOverlay.show {
  transform: translateX(0);
}

/* Header (Menu + Cross) */
.menuHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menuHeader h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: black;
}

.closeBtn {
  font-size: 2rem;
  cursor: pointer;
  color: black;
}

/* Links aligned left */
.menuLinks {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-left: 1rem;
}

.menuLinks a {
  font-size: 2rem;
  text-decoration: none;
  color: black;
  font-weight: 600;
}

/* Footer */
.menuFooter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1rem;
  margin-bottom: 100px;
}

.menuFooter p {
  font-weight: 600;
  color: black;
}

.menuFooter a {
  color: black;
  font-size: 1rem;
  text-decoration: none;
}

.workflowBtn {
  margin-top: 1rem;
  padding: 0.8rem 1.5rem;
  background: black;
  color: white !important;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
  width: fit-content;
}

.menuLinks a {
  font-size: 2rem;
  text-decoration: none;
  color: black;
  font-weight: 600;
  transform: translateX(-50px); /* start shifted left */
  opacity: 0; /* start invisible */
  transition: all 0.5s ease; /* smooth movement */
}

/* When menu is shown */
.menuOverlay.show .menuLinks a {
  transform: translateX(0);
  opacity: 1;
}

/* Stagger effect: each link delays a little */
.menuOverlay.show .menuLinks a:nth-child(1) {
  transition-delay: 0.1s;
}
.menuOverlay.show .menuLinks a:nth-child(2) {
  transition-delay: 0.2s;
}
.menuOverlay.show .menuLinks a:nth-child(3) {
  transition-delay: 0.3s;
}
.menuOverlay.show .menuLinks a:nth-child(4) {
  transition-delay: 0.4s;
}
.menuOverlay.show .menuLinks a:nth-child(5) {
  transition-delay: 0.5s;
}

.menuFooter {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.menuOverlay.show .menuFooter {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s; /* appears after links */
}



/* Hide overlay + hamburger by default */
.menuOverlay,
.hamburger {
  display: none;
}

/* Show them only on smaller screens (up to 1024px) */
@media (max-width: 768px) {
  .hamburger {  
    display: block; /* or flex depending on your design */
    cursor: pointer;
    z-index: 1000; /* above overlay */
  }

  .menuOverlay {
    display: flex; /* overlay becomes usable */
  }

  /* And hide normal nav links */
  #navRight {
    display: none;
  }
}

/* On larger screens (desktop), keep nav visible */
@media (min-width: 1025px) {
  #navRight {
    display: flex;
  }
}