@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Satisfy&display=swap");

/* Global styles */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Navbar and heading starts ////////////////////////////////////////////*/
.top {
  display: flex;
  margin-top: 20px;
  margin-left: 20px;
}

.leftside {
  display: flex;
  flex-direction: column;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 10;
}

.makepointer {
  cursor: pointer;
}

.rightside {
  position: relative;
  opacity: 0;
  animation: headingimage;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes headingimage {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.rightside img {
  width: 676px;
  height: 729px;
  border-radius: 30px;
  display: block;
}

.navbar h3 {
  font-weight: bold;
  font-size: 20px;
  margin-right: 90px;
}

.leftside h1 {
  font-size: 80px;
  margin-left: 30px;
  /* animation-name: headingup;
  animation-duration: 1.5s; */
}

/* @keyframes headingup {
  from {
    transform: translateY(60px);
  }
} */

.leftside p {
  margin-left: 30px;
  margin-top: 150px;
  margin-right: 60px;
  font-size: 20px;
  /* animation: paraheadingup;
  animation-duration: 1.5s; */
}

/* @keyframes paraheadingup {
  from {
    transform: translateY(60px);
    animation-delay: 2ms;
  }
} */

.leftside button {
  padding: 15px;
  width: 200px;
  background-color: black;
  color: white;
  border-radius: 30px;
  border: none;
  margin-left: 27px;
  cursor: pointer;
  transition: background-color 0.3s;
  opacity: 1;

  /* animation: headingbuttonup 2s linear 1s forwards; */
  /* animation-timeline: view(); */
  /* animation-range: entry 0% cover 50%; screen nadula varapa activa panna*/
}

/* @keyframes headingbuttonup {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.leftside button:hover {
  background-color: #333;
}

.rightsideonimg {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  width: 90%;
  height: 100px;
  border-radius: 20px;
  background-color: white;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.rightsideonimg img {
  width: 176px;
  height: 52px;
}

.thisisline {
  width: 120px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.829);
  border: none;
}

/* About us section ///////////////////////////////////////////////////*/
.aboutustop {
  display: flex;
  margin-top: 50px;
}

.leftaboutus {
  width: 50%;
}

.leftaboutus h1 {
  font-size: 70px;
  opacity: 1;
  margin-left: 50px;
  /* animation: leftaboutusanimation 2s linear forwards; */
}

/* @keyframes leftaboutusanimation {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.rightaboutus {
  width: 50%;
  margin-right: 50px;
}

.rightaboutus h1 {
  font-size: 35px;
  opacity: 1;
  /* animation: rightsideaboutusanimation 2s linear forwards; */
}

.rightaboutus h3 {
  opacity: 1;
  /* animation: rightsideaboutusanimation 2s linear forwards; */
}

.rightaboutus p {
  color: #212727c0;
  font-size: 20px;
  opacity: 1;
  /* animation: rightsideaboutusanimation 2s linear forwards; */
}

/* @keyframes rightsideaboutusanimation {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.rightnumber {
  display: flex;
  justify-content: space-between;
}

.makingcolor {
  color: #00000081;
}

/* Navbar styles */
.navbar {
  background-color: transparent;
  display: flex;
}

.nav-item {
  color: black;
  padding: 10px;
  cursor: pointer;
  position: relative;
  font-size: 13px;
  transition: color 0.3s;
}

.nav-item:hover {
  color: #555;
}

/* Dropdown menu ////////////////////////////*/
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  min-width: 150px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 100;
}

.dropdown-menu a {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: black;
  transition: background-color 0.3s;
  font-size: 12px;
}

.dropdown-menu a:hover {
  background-color: #ddd;
}

/* Show dropdown on hover */
.nav-item:hover .dropdown-menu {
  display: block;
}

/* image container /////////////////////////////////////////////////////////*/

.imagecontainer {
  display: flex;
  width: 100%;
  gap: 20px;
  margin-left: 40px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.imagecontainer img {
  height: 452px; /* Fixed height for all images */
  object-fit: cover;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border-radius: 10px;
  margin-left: 20px;
}

/* First image always has a larger width */
.imagecontainer img.first {
  width: 380px; /* Larger width for the first image */
}

/* Other images have a smaller width by default */
.imagecontainer img:not(.first) {
  width: 150px; /* Smaller width for other images */
}

/* When any other image is hovered, expand it to full width */
.imagecontainer img:not(.first):hover {
  width: 430px; /* Expanded width on hover */
}

/* Reduce the first image's width ONLY when another image is hovered */
.imagecontainer:hover img.first {
  width: 220px; /* Shrink the first image when another is hovered */
}

/* Ensure the first image remains larger when no hover is active */
.imagecontainer:not(:hover) img.first {
  width: 430px; /* Default larger size */
}

/* service provide //////////////////////////////////////////////////////////////////*/

/* Container for the entire section */
.servicediv {
  margin-left: 60px;
  margin-top: 100px;
  margin-bottom: 60px;
  font-size: 40px;
  overflow: hidden; /* Hide all scrollbars */
}

/* Heading style - fixed position */
.headingservice {
  position: sticky; /* Keep the heading fixed */
  left: 0;
  top: 0;
  z-index: 10;
  background-color: white;
  padding-right: 20px;
  opacity: 1;
  /* animation: serviceproviderheading 1s ease-in forwards; */
}

/* @keyframes serviceproviderheading {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

/* Outer container for the service cards */
.outerserviceprovide {
  display: flex;
  height: 400px;
  width: max-content; /* Allow the container to expand based on content */
  gap: 20px;
  padding-bottom: 20px; /* Add some padding to avoid cutting off content */
  scroll-snap-type: x mandatory; /* Enable snap scrolling */
  overflow: hidden; /* Hide scrollbars */
}

/* Individual service card */
.innerdiv {
  background-color: #f1eee6f6;
  border-radius: 20px;
  padding: 20px;
  transition: transform 0.1s ease-in-out;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto; /* Prevent flex items from shrinking */
  width: 400px; /* Set a fixed width for each innerdiv */
  scroll-snap-align: start; /* Snap each innerdiv to the start of the container */
  opacity: 1;
  /* animation: innderdivanimation 1s ease-in 500ms forwards; */
}

/* @keyframes innderdivanimation {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

/* Hover effect for service cards */
.innerdiv:hover {
  transform: scale(1.05); /* Slightly scale up on hover */
}

/* Flex container for the image and logo */
.imageflex {
  display: flex;
  justify-content: space-between;
  margin-left: 50px;
  align-items: center;
}

/* Styling for the small image */
.makesmall {
  height: 154px;
  width: 154px;
  transform: rotate(20deg);
  transition: transform 0.3s ease-in-out;
  position: absolute;
  right: -70px;
  top: -50px;
  border-radius: 20px;
}

/* Hover effect for the small image */
.innerdiv:hover .makesmall {
  transform: rotate(20deg) translateY(-20px) translateX(10px);
}

/* Black circle for the logo */
.blackround {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px; /* Adjust size as needed */
  height: 80px;
  background-color: transparent;
  border-radius: 50%;
  transition: background-color 0.3s ease-in-out;
}

/* Logo inside the black circle */
.blackround img {
  width: 40px; /* Adjust size as needed */
  height: auto;
  transition: filter 0.3s ease-in-out;
}

/* Hover effect for the black circle */
.innerdiv:hover .blackround {
  background-color: black;
}

/* Hover effect for the logo inside the black circle */
.innerdiv:hover .blackround img {
  filter: invert(1);
}

/* Heading and paragraph styles */
.outerserviceprovide h1 {
  font-size: 30px;
  margin-left: 60px;
  margin-right: 10px;
}

.outerserviceprovide p {
  font-size: 18px;
  margin-left: 60px;
  color: #5c5151;
  margin-right: 10px;
}

/* showcase of excellence////////////////////// */

/* Main container styling */
.outershowcase {
  margin-bottom: 50px;
  margin-left: 60px;
}

/* Heading styles */
.firstheading {
  font-size: 60px;
  opacity: 1;
  /* animation: showcaseofexcellence 1s ease-in forwards; */
}

/* @keyframes showcaseofexcellence {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

/* Container that holds the images */
.makeshowcaseimageflex {
  display: flex;
  gap: 20px;
  overflow-x: auto; /* Enables horizontal scrolling */
  scroll-behavior: smooth;
  white-space: nowrap;
  padding-bottom: 10px;
}

/* Hide scrollbar */
.makeshowcaseimageflex::-webkit-scrollbar {
  display: none;
}

/* Individual image container */
.showcaseimgdiv {
  position: relative;
  display: inline-block;
  flex: 0 0 auto; /* Prevents images from shrinking */
  opacity: 1;
  /* animation: showcaseimagedivanimation 1s ease-in 500ms forwards; */
}

/* @keyframes showcaseimagedivanimation {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

/* Image styling */
.showcaseimgdiv img {
  width: 600px;
  height: 450px;
  border-radius: 20px;
  transition: opacity 0.3s ease-in-out;
}

/* Button on hover */
.viewbuttononimage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  background-color: whitesmoke;
  color: black;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.showcaseimgdiv:hover .viewbuttononimage {
  opacity: 1;
}

/* why choose us /////////////////////////////////*/

.chooseusheading {
  font-size: 50px;
  font-weight: 600;
  margin-left: 100px;
  margin-top: 100px;
  opacity: 1;
  /* animation: chooseheadinganimation 1s ease-in forwards; */
}

/* @keyframes chooseheadinganimation {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.outerchooseus {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  /* Remove height: 100vh to allow natural content flow */
  /* Keep the scrollbar settings */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.outerchooseus::-webkit-scrollbar {
  display: none;
}

.seperaterchoose {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1140px;
  min-height: 438px;
  margin: 20px auto;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  background-color: white;
  position: relative;
  margin-bottom: 40px;
  opacity: 1;
  /* animation: seperatechooseusdivanimation 1s ease-in 500ms forwards; */
}

/* @keyframes seperatechooseusdivanimation {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

/* Add intersection observer trigger points */
.seperaterchoose.sticky {
  position: sticky;
  top: 20px;
}

.chooseusleft {
  width: 50%;
  padding-left: 40px;
}

.chooseusleft h3 {
  font-size: 35px;
  width: 350px;
  margin-left: 30px;
}

.chooseusleft p {
  color: #555;
  width: 350px;
  margin-top: 20px;
  margin-left: 30px;
}

.chooseusright {
  width: 50%;
  display: flex;
  justify-content: center;
}

.chooseusright img {
  width: 500px;
  height: 396px;
  border-radius: 25px;
  object-fit: cover;
}

.clientloveheading h1 {
  margin-left: 30px;
}

/* client love/////////////////////// */

.clientloveheading h1 {
  margin-left: 30px;
}

.clientloveheading {
  width: 640px;
  height: 445px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 40px;
  border-radius: 20px;
  border: 1px solid #e2e2e2;
  background-color: whitesmoke;
  flex-shrink: 0; /* Prevent the item from shrinking */
}
.innerloveusdiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
}

.faceicon {
  height: 60px;
  width: 60px;
}

.faceicondiv {
  display: flex;
  margin-left: 40px;
  gap: 10px;
}

.makesameline {
  margin: auto;
}

.makesameline p {
  margin: 0;
  padding: 0;
}

.makesameline p {
  margin: 0 0 0 0;
  padding: 0;
}

.clientloveheadingtwo {
  width: 550px;
  height: 80px;
  font-size: 40px;
  font-weight: 500;
  margin-left: 40px;
}

.firstclientloveheading {
  font-size: 80px;
  font-weight: 500;
  width: 700px;
  margin-left: 100px;
  opacity: 1;
  /* animation: clientloveusheadinganimation 1s ease-in forwards; */
}

/* @keyframes clientloveusheadinganimation {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.thisisloveuspara {
  width: 540px;
  height: 96px;
  margin-left: 40px;
  color: #413939;
  font-size: 18px;
  line-height: 25px;
}

.leftsidesvgloveclient {
  margin-right: 60px;
}

.makeclientloveusscroall {
  display: flex;
  gap: 20px;
  margin-left: 90px;
  overflow-x: auto; /* Allow horizontal scrolling */
  scrollbar-width: none; /* Firefox hides scrollbar */
  -ms-overflow-style: none; /* Internet Explorer / Edge hides scrollbar */
  opacity: 1;
  /* animation: clientloveusanimation 1s ease-in 500ms forwards; */
}

/* @keyframes clientloveusanimation {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.makeclientloveusscroall::-webkit-scrollbar {
  display: none; /* Chrome/Safari hides scrollbar */
}

.makingloveusheadingbig {
  font-size: 22px;
  font-weight: bold;
}

/* moving company logo  */

.container {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  opacity: 0;
  animation: movinglogoanimation 1s ease-in forwards;
}

.logos-wrapper {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: scroll 10s linear infinite;
}

@keyframes movinglogoanimation {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.logo {
  width: 120px;
  height: 120px;
  margin-right: 32px;
}

/* Keyframe animation for seamless infinite scrolling */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* pricing ///////////////////////////////////// */

.pricingheading {
  text-align: center; /* Centers the text */
  max-width: 700px; /* Adjust width for proper alignment */
  margin: 0 auto; /* Centers the block */
  line-height: 1.2; /* Adds spacing between lines */
  word-break: break-word; /* Ensures wrapping */
  font-size: 60px;
  margin-top: 20px;
  opacity: 1;
  /* animation: pricinganimationheading 1s forwards; */
}
/* 
@keyframes pricinganimationheading {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.pricingouterflex {
  display: flex;
  gap: 30px;
}
.tickimage {
  height: 15px;
  width: 20px;
}

.topdivprice {
  width: 390px;
  height: 151px;
  border: 1px solid #e2e2e2;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: whitesmoke;
}

.bottomdivprice {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #e2e2e2;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: whitesmoke;
}

.getstartedbutton {
  border: none;
  width: 265px;
  height: 42px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.5s ease;
  background-color: white;
  color: black;
  font-weight: bold;
}

.getstartedbutton:hover {
  background-color: black;
  color: white;
  /* The transition property in the main class will handle the smooth effect */
}

.seperateone {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.makingitemscenter {
  margin: auto;
  display: flex;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 100px;
  opacity: 1;
  /* animation: pricingareaanimation 1s forwards 500ms; */
}

/* @keyframes pricingareaanimation {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.topdivprice h3 {
  margin-left: 40px;
}

.topdivprice h1 {
  margin-left: 40px;
}

.makemosmall {
  font-size: 15px;
}

.bottomdivprice h4 {
  color: #5c5151;
}
.firstmovedown {
  margin-top: 180px;
  margin-bottom: 30px;
}
.onlyforheading {
  margin-top: 30px;
}
.secondgetstarted {
  margin-top: 150px;
  margin-bottom: 20px;
}

.thridgetstartedbut {
  margin-top: 110px;
  margin-bottom: 20px;
}

/* unique soluction //////////////// */
.uniquesoluctionflex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1060px;
  height: 162px;
  margin: auto;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  margin-bottom: 150px;
  opacity: 1;
  /* animation: uniquesoluctionanimation 1s forwards; */
}

/* @keyframes uniquesoluctionanimation {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.uniquesoluctionblock {
  display: flex;
  gap: 20px;
  margin-right: 20px;
}

.uniquesoluctionone h1 {
  margin-left: 50px;
}

.uniquesoluctionblock button {
  width: 160px;
  height: 58px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-weight: bolder;
}

.uniquewhitebutton:hover {
  background-color: black;
  color: white;
  transition: all 0.5s ease-in;
}

.uniqueblackbutton {
  background-color: black;
  color: white;
}

.uniqueblackbutton:hover {
  background-color: #000000a4;
  transition: all 0.5s ease-in;
}

/* frequently asked///////////////// questions */

/* Main container */
.frequentlyaskedflex {
  display: flex;
  justify-content: space-around;
  margin-left: 80px;
  padding: 20px;
}

/* Left section */
.leftsidefrequently {
  width: 360px;
  opacity: 1;
  /* animation: leftfrequentlyanimation 1s forwards; */
}

/* @keyframes leftfrequentlyanimation {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.leftsidefrequently h1 {
  font-size: 40px;
}

/* Right section */
.rightsidefrequently {
  display: flex;
  flex-direction: column;
  width: 700px;
  gap: 10px; /* Reduced gap */
}

/* FAQ Box */
.boxouters {
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 15px;
  transition: all 0.3s ease-in-out;
  opacity: 1;
  /* animation: boxoutersanimation 1s forwards 500ms; */
}

/* @keyframes boxoutersanimation {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

/* Question + Icon */
.makingflexicons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
}

/* Cursor effect on Plus/Minus */
.makingpluscursor {
  cursor: pointer;
  font-size: 18px;
}

/* Paragraph (Initially Hidden) */
.answer {
  max-height: 0;
  color: #5c5151;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-out, opacity 0.3s ease-in;
}

/* When answer is visible */
.answer.show {
  max-height: 200px; /* Adjust based on content */
  opacity: 1;
  padding-top: 8px;
}

/* last image  */

/* Center the image on the page */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Ensures vertical centering */
}

/* Keep everything inside the image */
.image-container {
  position: relative;
  width: 1240px;
  height: 427px;
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ensure the image is responsive */
.lastimage {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  display: block;
}

/* Position the text and button inside the image */
.image-overlay {
  position: absolute;
  top: 200px;
  left: 300px;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Style the button */
.finalcontactusbutton {
  width: 166px;
  height: 48px;
  background-color: white;
  color: black;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out,
    transform 0.3s ease-in-out;
  margin-left: 30px;
  opacity: 1;
  /* animation: lastimagebuttonanimatin 1s forwards 500ms; */
}

/* @keyframes lastimagebuttonanimatin {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.finalcontactusbutton:hover {
  background-color: black;
  color: white;
  transform: scale(1.1);
}

.image-overlay h1 {
  font-size: 40px;
  opacity: 1;
  /* animation: lastimageanimation 1s forwards; */
}

/* @keyframes lastimageanimation {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

.nowrap {
  margin-left: -100px;
}

/* making footer */

.makingouterfooter {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.makingarerflex {
  display: flex;
}

.makingarerflex a {
  color: black;
}
.makingfooterparawrap {
  width: 315px;
  height: 72px;
}

.makingfooterparawrap p {
  color: #1d1b1b;
}

.imagetesting {
  display: flex;
  align-items: center;
  gap: 10px;
}

.imagetesting img {
  width: 25px;
  height: 25px;
  cursor: pointer;
  color: #5c5151;
}

.imagetesting img:hover {
  background-color: #00000056;
  border-radius: 20px;
}

.imagetesting img[alt="facebook"] {
  width: 40px;
  height: 40px;
}

.imagetesting img[alt="instagram"] {
  width: 32px;
  height: 32px;
}

.imagetesting img[alt="linkedin"] {
  width: 38px;
  height: 38px;
}

.imagetesting img[alt="be"] {
  width: 35px;
  height: 35px;
}

/* final footer */

.finalfooter {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 40px;
  margin-bottom: 60px;
}

.finalfooter div:nth-child(1) {
  margin-left: -18px;
}

.finalfooter div:nth-child(2) {
  margin-left: -120px;
}

.finalfooter div:nth-child(3) {
  margin-right: 10px;
}

.finalfooter a {
  color: #161515;
}

/* last bottom icon */

.fixed-image {
  position: fixed;
  bottom: 20px; /* Adjust as needed */
  right: 20px; /* Adjust as needed */
  z-index: 1000; /* Ensures it stays on top */
  background-color: whitesmoke; /* Background color */
  width: 50px; /* Increased width */
  height: 50px; /* Increased height */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Makes it round */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for a better look */
}

.fixed-image img {
  width: 30px; /* Adjust size as needed */
  height: auto;
  cursor: pointer;
}

.ontheimage {
  background-color: black;
  color: white;
  border-radius: 30px;
  width: 15px;
  height: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 8px;
  right: 7px;
  font-size: 8px;
  border: none;
}