.main{
  /* background: #FFFFFF; */
  /* display: flex; */
  flex-direction: column;
  align-items: center;
  padding-bottom: 24px;
  box-sizing: border-box;
}

nav{
background: #FFFFFF;
/* margin-bottom: 60px; */
position: relative;
box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.1);
padding: 24px 97px 26px 53px;
box-sizing: border-box;
flex-direction: row;
justify-content: space-between;
/* display: flex; */
 
  /* 
  width: 1500px;
   */
}
.section1{
margin-top: 60px;
}

.web-sp-name{
  font-weight: bold;
  font-family: "Georgia", serif;
}

.web-sp-name--test{
  font-style: italic;
  text-decoration: underline;

  font-family: "Georgia", serif;

  text-transform: uppercase;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

  text-shadow: 3px 3px 5px rgba(255, 0, 0, 0.7);

  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3), 0px 0px 25px rgba(255, 105, 180, 0.5); font-size: 36px;

  text-shadow: 3px 3px 6px rgba(0, 0, 255, 0.5), 0px 0px 15px rgba(0, 0, 255, 0.3);

  text-shadow: 0 0 10px rgba(0, 0, 255, 0.8), 0 0 20px rgba(0, 0, 255, 0.6);

  background: linear-gradient(45deg, #ff7f50, #1e90ff);  -webkit-background-clip: text; color: transparent;


  color: white;  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.3);


  font-style: italic; font-size: 30px;  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5), -4px -4px 10px rgba(255, 105, 180, 0.3);
}


.navbar-nav{
      /*margin: 16px 0 0 150px;*/
      /* display: flex; */
      /* flex-direction: row; */
      justify-content: space-between;
      /*width: 429px;*/
      height: fit-content;
      box-sizing: border-box;
}


.nav-item a{
  overflow-wrap: break-word;
  font-family: "poppins", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
}
.container-3 {
  /*margin: 12px 0 10px 0;*/
  /*flex-direction: row;*/
  /*justify-content: space-between;*/
  width: 179px;
  /*height: fit-content;*/
  /*box-sizing: border-box;*/
}

  
@media screen and (max-width: 767px) {
.container-3 {
  margin: 12px 30px 10px 21px;
}
}

.mdiaccount-alert-outline {
  opacity: 0.4;
  display: flex;
  padding: 4.7px 2.3px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
}
.akar-iconsheart {
  opacity: 0.4;
  display: flex;
  padding: 3.5px 2.3px 3.7px 2.3px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
}
.akar-iconssearch {
  opacity: 0.4;
  display: flex;
  padding: 2.3px 3.5px 3.5px 2.3px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  margin-top: 7.3px;
}
.vector-1 {
  width: 23.3px;
  height: 18.7px;
}
.vector-2 {
  width: 23.3px;
  height: 20.8px;
}
.vector {
  /* width: 22.2px;
  height: 22.2px; */
}
/* 
.col-6 img {
  box-shadow: 3.1px 9.4px 21.9px 0px rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  background: #FFFFFF content-box, linear-gradient(96.34deg, #C5ECFF 0.9%, #95DDFF 96.5%) border-box;
  background: linear-gradient(96.34deg, #C5ECFF 0.9%, #95DDFF 96.5%);
  border: 4px solid transparent;
  position: relative;
  margin-right: 25px;
  display: flex;
  flex-direction: column;
  padding: 225px 0 27px 32.2px;
  width: 608px;
  height: 20em;
  box-sizing: border-box;
} */


/* @media only screen and (max-width: 168px) {
  .card-img {
    border-radius: 24px;
    position: absolute;
    left: 50%;
    top: 2px;
    translate: -50% 0;
    width: 308px;
    height: 302px;
  }
} */

.card-img {
  border-radius: 24px !important;
  /* background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.44)),50% / cover no-repeat; */
  /*position: absolute;*/
  /*left: 50%;*/
  /*top: 2px;*/
  /*translate: -50% 0;*/
  /* width: 608px; */
  height: 302px;
}

.prototyping {
  position: relative;
  align-self: flex-start;
  overflow-wrap: break-word;
  font-family: "poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  color: #FFFFFF;
}
.the-text-of-the-description-is-here-abcdefghigklmnopq {
  position: relative;
  margin: 0 0.1px;
  align-self: flex-start;
  overflow-wrap: break-word;
  font-family: "poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.571;
  color: #E4E4E4;
}

/* start footer */
.group-44 {
  margin: 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1240px;
  box-sizing: border-box;
}

.group-441 {
  text-align: center; /* Center contents inside this container */
}

.line-4 {
  background: #D9D9D9;
  margin: 0 auto 34px auto; /* Center horizontally and set bottom margin */
  margin-top: 40px;
  width: 1158px;
  height: 1px;
  display: block; /* Ensure it behaves as a block element for centering */
}

.all-rights-reverved {
  margin-left: 0.9px;
  overflow-wrap: break-word;
  font-family: "poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #000000;
}

@media screen and (max-width: 767px) {
  .group-44 {
    width: 300px;
    align-items: center;

  }
  .line-4 {
    background: #D9D9D9;
    margin-bottom: 34px;
    margin-top: 40px;
    width: 340px;
    height: 1px;
  }
  .all-rights-reverved {
    margin-left: 0.9px;
    overflow-wrap: break-word;
    font-family: "poppins", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
  }
}


/* end footer */
.card{
      border: none !important;
}
.card17 {
  position: relative; /* Ensure .menu-container is positioned relative to .card17 */
}

.menu-container {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7); /* Optional dark overlay */
  color: #fff; /* Text color for visibility */
  padding: 20px; /* Adjust padding as needed */
  z-index: 2; /* Ensure it appears above the overlay */
  transition: opacity 0.3s ease;
  opacity: 0;
  border-radius: 24px !important;

  
}

.card17:hover .menu-container {
  display: block;
  opacity: 1;
}

.card-img-overlay {
  position: relative;
  z-index: 1; /* Keep it below the menu-container */
}

.card-img-overlay {
  position: relative;
  display: flex;
  align-items: flex-end; /* Align items at the bottom */
  padding: 20px; /* Adjust padding as needed */
}

.card-title {
  position: absolute;
  bottom: 20px; /* Position title near the bottom */
  left: 10px; /* Position title to the left */
  margin: 0;
  color: #fff; /* Make text color contrast with the background */
  font-size: 1.5rem; /* Adjust font size as needed */
  padding: 5px 10px; /* Add padding for better readability */
  border-radius: 5px; /* Rounded corners for the background */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.textt {
  position: absolute;
  bottom: 6px; /* Position title near the bottom */
  left: 10px; /* Position title to the left */
  margin: 0;
  color: #fff; /* Make text color contrast with the background */
  font-size: 1.5rem; /* Adjust font size as needed */
  padding: 5px 10px; /* Add padding for better readability */
  border-radius: 5px; /* Rounded corners for the background */
}

/* Initially hide the menu-container */
/*.menu-container {*/
/*    display: none;*/
/*    opacity: 0;*/
/*    transition: opacity 0.3s ease;*/
/*}*/

/* Show menu-container when hovering over .card17 */
/*.card17:hover .menu-container {*/
/*    display: block;*/
/*    opacity: 1;*/
/*}*/
/*@media screen and (max-width: 1024px) {*/
/*  .menu-container {*/
/*    max-width:336px; */
/*  }*/
/*}*/

/*@media screen and (max-width: 480px) {*/
/*  .menu-container {*/
/*    max-width: 90%; */
/*    padding-top: 20px; */
/*  }*/
/*}*/
/*.menu-container {*/
/*    border-radius: 24px;*/
/*    background-color: rgba(0, 0, 0, 0.6);    position: absolute;*/
/*    left: 50%;*/
/*    top: 2px;*/
/*    translate: -50% 0;*/
/*    width: 633px;*/
/*    height: 302px; */
/*    flex-direction: column;*/
/*    display: none; */
/*    padding-top: 27px;*/
/*}*/

/*@media screen and (max-width: 767px) {*/
/*  .menu-container {*/
/*    width: 474px;*/
/*    height: 302px; */
/*}*/
/*}*/

/*@media screen and (max-width: 897px) {*/
/*  .menu-container {*/
/*    width: 50px;*/
/*    height: 302px; */
/*}*/
/*}*/

/*.card17:hover .menu-container {*/
/*    display: flex; */
/*}*/
.menu-item {
  position: relative;
margin-bottom:4px;
/*margin-left: 29px;*/
display: flex;
flex-direction: row;
align-self: flex-start;
width: fit-content;
box-sizing: border-box;

}

@media screen and (max-width: 767px) {
.menu-item {
  margin-left: 20px;
}
}


.menu-item.active {
  /* background-color: #007bff; */
  padding: 10px;
  border-radius: 24px;
}

.menu-icon {
  display: flex;
  width: 7px;
  height: 11.9px;
  box-sizing: border-box;
  margin-right: 10px;
}

.submenu {
   display: none;
  gap: 3px;
  margin-left: 5px;
  /* margin-top: 10px; */
  /* background-color: rgba(255, 255, 255, 0.2); */
  /* padding: 5px; */
  border-radius: 8px;
}

@media screen and (max-width: 767px) {
.submenu{
  margin-left: 4px;
}
}


.menu-item:hover .submenu {
  display: flex; /* Show submenu on hover */
}

.submenu .group {
      /* opacity: 0.3; */
      border-radius: 40px;
      background-color: rgba(255, 255, 255, 0.4);
      /* background: #FFFFFF; */
      position: relative;
      display: flex;
      padding: 0px 6px 0px 6px;
      box-sizing: border-box;
      /* color: #FFFFFF; */
  /* overflow-wrap: break-word;
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 16px;
  line-height: 1.375;
  color: #FFFFFF; */
}
@media screen and (max-width: 767px) {
.submenu .group {
  padding: 0px 6px 0px 6px;
}
}
.group:hover{
      background: #17B8DF;
}
.text_span{
  overflow-wrap: break-word;
  font-family: "poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.385;
  color: #FFFFFF;
  padding: 1px;
}
@media screen and (max-width: 767px) {
.text_span{
  font-weight: 200;
  font-size: 11px;
  line-height: 2.385;
}
}

.menu-text{
  overflow-wrap: break-word;
  font-family: "poppins", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.375;
  color: #FFFFFF;
  padding-top: 4px;
}
.menu-text:hover{
  background: #17B8DF;
  border-radius: 40px;
  padding: 4px 14px 0px 14px;

}
@media screen and (max-width: 767px) {
.menu-text:hover{
  border-radius: 40px;
  padding: 3px 11px 0px 11px;
}
}
.vector {
  width: 9.2px;
  height: 16.2px;
  margin-top: 3px;
  margin-left: 6px;
  /* width: 7px; */
  /* height: 11.9px; */
  /* margin-left: -7px; */
}
.menu-icon{
  width: 23px; /* Set a width for the image */
  height: 23px; /* Set a height for the image */
  border-radius: 50%; /* Make the image circular */
  border: 1px solid #17B8DF; /* Add a border (change color and width as needed) */
  object-fit: cover; /* Ensures the image covers the container, cropping if necessary */
 
}
.card17::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:304px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.01)),50% / cover no-repeat;
  border-radius: 24px; /* Same as the image for consistent rounding */
  z-index: 2;
  pointer-events: none; /* Allows clicking through the overlay */
}