body {
  background-image: url("image/Homepage.svg"); /* Specify the path to your SVG file */
  background-size: cover;
  background-repeat: no-repeat;
}

@font-face {
  font-family: "Comfortaa";
  src: url("./font/static/Comfortaa-Bold.ttf") format("woff2"),
    url("./font/static/Comfortaa-Bold.ttf") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Nunito Font */
@font-face {
  font-family: "Nunito";
  src: url("./font/static/Nunito-Regular.ttf") format("woff2"),
    url("./font/static/Nunito-Regular.ttf") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* navbar start */
.navbar-nav li.nav-item a.nav-link {
  color: #000f1f;
}
/* CSS for the first button with black border */
.navbar-right .navbar-nav li.nav-item:first-child a.nav-link {
  color: #000f1f; /* Text color for the first button */
  background: transparent; /* Transparent background */
  border: 1px solid #000f1f; /* Black border */
  border-radius: 20px; /* Rounded corners */
  padding: 10px 20px; /* Adjust padding for the first button */
}
/* CSS for setting the font family to Nunito for navigation links */
.navbar-nav li.nav-item a.nav-link {
  font-family: "Nunito", sans-serif;
  color: #000f1f; /* Text color for navigation links */
}

/* CSS for the second button with white background and no border */
.navbar-right .navbar-nav li.nav-item:last-child a.nav-link {
  color: #000f1f; /* Text color for the second button */
  background: #fff 90%; /* White background */
  border: none; /* No border */
  border-radius: 20px; /* Rounded corners */
  padding: 10px 20px; /* Adjust padding for the second button */
  font-family: "Nunito", sans-serif;
}
.btn_un {
  text-decoration: none;
}

a.btn_un {
  text-decoration: none;
}

.nav-item_h {
  display: block; /* Assuming it's normally a block-level element */
}
@media (max-width: 768px) {
  .nav-item_h {
    display: none; /* Hide the element */
  }
}

/* navbar end  */

/* home page */
/* section 1  start  */
.heading_in {
  font-size: 66px;
  font-family: Comfortaa;
  line-height: 73px;
}

.pd_top {
  padding-top: 116px;
}

.sectone_font {
  font-family: Nunito;
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
}
.btn.btn-purple-gradient {
  background-color: #8548c7; /* Background color for the button */
  color: #fff; /* Text color (white) */
  text-decoration: none; /* Remove underline */
  font-size: 16px;
}
.learn_bt_size {
  font-size: 18px;
}
.btn.btn-purple-gradient:hover {
  background-color: #8548c7; /* Background color on hover (if needed) */
}

/* Custom gradient background for the button */
.btn-purple-gradient {
  background: linear-gradient(
    90deg,
    #9867cc 0%,
    #8548c7 100%
  ); /* Gradient with purple colors */
  border: none; /* Remove the default button border */
  color: #ffffff; /* Text color */
}
/* Add padding and round the corners of the button */
.btn-purple-gradient.rounded-pill {
  padding: 10px 20px; /* Adjust the padding as needed */
  border-radius: 20px; /* Round the corners */
}

.col-md-6.text-column {
  padding-top: 50px; /* Adjust the padding as needed */
}
.py-padding_section_1 {
  padding-top: 80px;
  padding-bottom: 30px;
}
/* Adjust top and bottom padding for text in the first column */

/* Media query for smaller screens (up to 836px width) */
@media (max-width: 958px) {
  .col-md-6.text-column {
    padding-top: 40px; /* Adjust the top padding for text */
  }
  .heading_in {
    font-size: 44px;
    line-height: 44px;
    letter-spacing: -1%;
    weight: 700;
  }
  .sectone_font {
    font-family: Nunito;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }

  .col-md-6.text-column {
    padding-top: 20px; /* Adjust the padding as needed */
  }
  .py-padding_section_1 {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .py-padding {
    padding-top: 30px !important;
    padding-bottom: 20px !important;
  }
}
/* section 1  end  */
/* section 2 start  */
.py-padding {
  padding-top: 80px;
  padding-bottom: 30px;
}

.text_clr p {
  color: #918c8c;
}

/* Style for the image container slider */
/* Style for the image container slider */
.image-container {
  width: 100%;
  overflow: hidden;
}

/* Style for the image slider */
.image-slider {
  display: flex;
  animation: slide 150s linear infinite;
}

.image-slide {
  width: 100px;
  height: 50px;
  margin-right: 90px; /* Adjust spacing between images */
}

/* Keyframes for the slide animation */
@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(50%); /* Move images right by 50% of their width */
  }
}

/* Style for the sliding text */
.slide-in {
  position: relative;
  left: -100%;
  animation: slideIn 5s forwards; /* Adjust animation duration as needed */
}

/* Keyframes for the slide-in animation */
@keyframes slideIn {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

/* Style for the sliding text */
.slide-in-img {
  position: relative;
  left: -100%;
  animation: slideIn 150s forwards; /* Adjust animation duration as needed */
}

/* Keyframes for the slide-in animation */
@keyframes slideIn {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}
/* Style for the sliding text */
.slide-in-imgall {
  position: relative;
  left: -100%;
  animation: slideIn 5s forwards; /* Adjust animation duration as needed */
}

/* Keyframes for the slide-in animation */
@keyframes slideIn {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}
/* section 2  end  */

.btn-block1 {
  display: block;
  width: 100%;
}
/* section 3 start  */
.secondnd {
  font-size: 44px;
  font-family: Comfortaa;
  line-height: 61px;
  padding-bottom: 30px;
}

.btn_txt {
  font-size: 16px;
  font-family: Nunito;
  line-height: 21px;
}
.three_btn {
  padding-top: 50px;
}

/* Style for the overlay image */
.overlay-img {
  position: absolute;
  top: -30px;
  left: 530px;
  width: 100px; /* Set the width as needed */
  height: auto; /* Automatically adjust the height */
  z-index: -1; /* Place the image above the video */
}
.transparent-video {
  opacity: 2; /* Adjust the opacity value as needed */
}

@media (max-width: 849px) {
}

@media (max-width: 958px) {
  .secondnd {
    font-size: 30px;
    font-family: Comfortaa;
    line-height: 42px;
  }

  .three_btn {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .overlay-img {
    position: absolute;
    top: 150px;
    left: 280px;
    width: 100px; /* Set the width as needed */
    height: auto; /* Automatically adjust the height */
    z-index: -1; /* Place the image above the video */
  }
}
/* section 3 end  */

/* section 4 start  */

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

.cards {
  flex: 0 0 calc(33.333% - 10px); /* 33.333% width with padding */
  background: var(
    --glass-morph-glass-fill-2,
    linear-gradient(
      181deg,
      rgba(255, 255, 255, 0.5) 1.15%,
      rgba(255, 255, 255, 0) 98.91%
    )
  );
  backdrop-filter: blur(30px);
  border: 2px solid var(--glass-morph-glass-stroke-1, rgba(255, 255, 255, 0.5));

  border-radius: 20px; /* Top left corner border radius */

  padding: 30px;
  overflow: hidden;
  background: linear-gradient(
    155.31deg,
    rgba(255, 255, 255, 0.5) 12.33%,
    rgba(255, 255, 255, 0) 34.31%,
    rgba(255, 255, 255, 0) 52.66%,
    rgba(255, 255, 255, 0.54) 74.67%
  );
  opacity: 2;
  position: relative;
}

.pd {
  padding-top: 50px;
}
.cards img {
  height: 100px;
  width: 100px;
  transition: transform 0.3s; /* Add a smooth transition effect */
}
.num {
  color: #8548c7;
}

.cards:hover .card-img {
  transform: scale(1.8); /* Zoom the image by 10% on hover */
}
.cards:hover h4.num {
  opacity: 0; /* Hide the num when cards are hovered */
  transition: opacity 0.3s; /* Add a smooth transition effect */
}

.num {
  font-size: 24px;
  opacity: 1; /* Ensure the num is visible by default */
  transition: opacity 0.3s; /* Add a smooth transition effect */
}

h3 {
  font-size: 20px;
  margin-top: 10px;
}

p {
  font-size: 16px;
  margin-top: 10px;
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  .cards-container {
    flex-direction: column; /* Stack cards vertically on smaller screens */
  }

  .cards {
    width: 100%; /* Full width for each card on smaller screens */
    margin-bottom: 20px; /* Add some space between cards */
  }
}

/* section 4 end  */
/* section 5 start  */
.card-body {
  display: flex;
  align-items: center; /* Vertically center the content */
}
.car {
  flex: 0 0 calc(33.333% - 10px); /* 33.333% width with padding */
  background: var(
    --glass-morph-glass-fill-2,
    linear-gradient(
      181deg,
      rgba(255, 255, 255, 0.5) 1.15%,
      rgba(255, 255, 255, 0) 98.91%
    )
  );

  border: 2px solid var(--glass-morph-glass-stroke-1, rgba(255, 255, 255, 0.5));
  backdrop-filter: blur(30px);

  border-radius: 16px; /* Top left corner border radius */
  margin: 10px;
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: space-between; /* Distribute space evenly between items */
  align-items: left;
}

.pic1 img {
  height: 22px;
  width: 22px;
  margin-left: -10px;
}

.padding_l p {
  padding-left: 10px;
  font-size: 18px;
  font-family: Nunito;
  margin: 0; /* Remove default margin for p element */
}

/* section 5 end  */

/* section 6 start  */
.bg_image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  height: 477px;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff; /* Set the text color for better visibility */
  border-radius: 10px; /* Add border-radius for rounded corners */
}

.bg_image h2,
.bg_image p,
.bg_image a {
  color: #fff; /* Set the text color for better visibility */
}

.col-md-6.order-md-2.order-1 {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: center; /* Center content vertically */
}

.col-md-6.order-md-1.order-2.d-mobile.d-none.d-md-block {
  display: flex;
  align-items: center; /* Center content vertically */
}

.px-4 {
  display: flex;
  flex-direction: column;
  align-items: left; /* Center content vertically */
}

.d-flex {
  margin-top: 10px; /* Add margin-top if needed */
}

.txt_app p {
  text-align: left;
  font-size: 22px;
  font-family: Nunito;
  line-height: 27px;
}
.txt_lft {
  font-size: 44px;
  font-family: Comfortaa;
  line-height: 61px;
  padding-bottom: 30px;
  text-align: left;
}
@media (max-width: 767px) {
  .bg_image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    height: 330px;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff; /* Set the text color for better visibility */
    border-radius: 10px; /* Add border-radius for rounded corners */
  }
  .txt_lft {
    text-align: left;
    padding-top: 20px;
    padding-bottom: 5px !important;
    font-size: 27px;
    font-family: Comfortaa;
    line-height: 42px;
  }
  .txt_app p {
    padding-top: 0;
    font-size: 16px;
    font-family: Nunito;
    line-height: 24px;
  }
}

/* SECTION 7 START  */
.row {
  display: flex;
  align-items: center; /* Center content vertically */
}

.col-12.col-md-6 {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: center; /* Center content vertically */
}

.image_pharma {
  display: flex;
  align-items: center; /* Center content vertically */
}

/* Optional: Add margin-top to create space between columns */
.col-12.col-md-6 {
  margin-top: 10px; /* Adjust the margin as needed */
}

/* footer start 
 */
.tex {
  text-align: center;
  padding-top: 100px;
}

.icon_f a {
  text-align: center;
}
/* CSS to style the buttons */
.custom-button {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  color: #333; /* Text color */
  cursor: pointer;
  text-decoration: underline; /* Remove underlines from links */
}
.footer-link {
  color: #333;
  text-decoration: none;
}
.img_store img {
  height: 65px;
  width: 124px;
  padding: 10px;
}

.vertical-separator {
  border-left: 2px solid #ccc;
  height: 50px;
  margin: 0 15px;
}

.custom-btn {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.text_f {
  padding-top: 10px;
  color: #000000;
}
.tex_footer {
  padding-top: 70px;
}

.icon-size {
  font-size: 24px; /* Adjust the size as needed */
}

.white-transparent-bg {
  background-color: rgba(255, 255, 255, 0.7); /* White with 70% transparency */
  /* Add other styling properties as needed */
}

.nav-link {
  margin-right: 10px; /* Add right margin to create space between links */
}

.white-transparent-hr {
  border: none; /* Remove the default hr border */
  height: 2px; /* Set the height of the hr line */
  background-color: rgba(255, 255, 255, 0.5); /* White with 50% transparency */
  margin: 20px 0; /* Adjust margin as needed */
}

.footer img {
  margin-bottom: 10px;
  margin-left: 10px;
  width: 60px;
  height: 30px;
}

.icon-link {
  margin: 0 10px; /* Adjust the margin to control the space between images */
}

.icon-link img {
  width: 36px; /* Set the width of the images as needed */
  height: 36px; /* Set the height of the images as needed */
}

.footer_bg {
  background: var(
    --glass-morph-glass-fill-2,
    linear-gradient(
      181deg,
      rgba(255, 255, 255, 0.5) 1.15%,
      rgba(255, 255, 255, 0) 98.91%
    )
  );
  /* Glass Morph 2 */
  backdrop-filter: blur(30px);
}

/* home page end  */

/* contact us start  */
.col-md-6 {
  flex: 0 0 50%;
  padding: 15px;
}

h1 {
  font-size: 2em;
  margin-top: 0;
}

form {
  margin-top: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-control {
  border: none;
  border-bottom: 1px solid #ccc;
  box-shadow: none;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-primary:hover {
  background-color: #0069d9;
}

.form-control {
  text-decoration: none;
}

.txt-pt_CON {
  padding-left: 20px;
  line-height: 36px;
}

.txt-pt {
  margin-left: 16px;
}

.vision_cls img {
  margin-top: -50px;
}
.CON_IMG img {
  padding-bottom: 48px;
}
.glass-morph {
  background: linear-gradient(to left, #cdd8eb 0%, #ffffff 100%);
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(182, 198, 231, 0.2);
}

.card-con .cards {
  flex: 1;
  margin: 10px; /* Adjust the margin to control the spacing between cards */
}

.txt_login {
  text-align: left;
  padding-top: 20px;
  padding-bottom: 5px !important;
  font-size: 32px;
  font-family: Comfortaa;
  line-height: 42px;
}

/* Define the animation keyframes */
@keyframes slidein {
  0% {
    transform: translateY(100%); /* Start at the bottom */
  }
  100% {
    transform: translateY(0); /* Move to the top */
  }
}

/* Apply the animation to the section container */
.card-con {
  animation: slidein 0.5s linear; /* Use the slidein animation for 1 second */
  animation-fill-mode: forwards; /* Keep the final state after animation */
}

.clor {
  color: #52525b;
}

.text_contact {
  font-family: Nunito;
  font-size: 18px;
  line-height: 27px;
}

/* Position the image absolutely */
.absolute-image {
  position: absolute;
  top: -30px;
  right: -20px;
  width: 100px; /* Adjust the width as needed */
  height: auto; /* Maintain the aspect ratio */
}
/* contact us end  */

/* about us page css start  */
/* section1 start  */
.about_heading {
  font-size: 54px;
  font-family: Comfortaa;
  line-height: 75px;
  padding-bottom: 30px;
}
.about_text {
  font-size: 22px;
  font-family: Nunito;
  line-height: 27px;
  padding-bottom: 30px;
  line-height: 1.5;
}

.about_text_3rd {
  font-size: 20px;
  font-family: Nunito;
  line-height: 27px;
  padding-bottom: 10px;
}

.py-padding_about_2nd {
  padding-top: 80px;
  padding-bottom: 50px !important;
}
/* section 3  */

.about_44_text {
  font-size: 38px;
  font-family: Comfortaa;
  line-height: 61px;
  padding-bottom: 30px;
}

.vision {
  font-family: "Samibolt", Nunito; /* Use the font-family defined in @font-face */
  /* Add any other desired styling for your heading */
}
.vl {
  border-left: 1px solid #8555b2;
  height: 70px;
}

.ab {
  border-left: 1px solid #8555b2;
  height: 70px;
}

@media (max-width: 768px) {
  .license_stay {
    text-align: end;
  }
}

/* section 4 */

/* Existing styles for cards */

/* Hover effect */
.card-content .small-img {
  height: 40px;
  width: 40px;
  padding-left: 6px;
  padding-bottom: 4px;
  position: fixed;
}

.card-content p {
  padding-left: 10px;
}

.card-content {
  position: relative;
  transition: transform 0.3s;
}

.card-content .small-img {
  opacity: 0;
  position: absolute;
  top: 52%;
  left: 10%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}

.cards:hover .card-content {
  transform: translateY(-46%);
}

.cards:hover .card-content .small-img {
  opacity: 1;
}

.card-text {
  padding-left: 10px;
  position: relative;

  transform: translateY(-10%);
  padding-top: 100px;
}
.padding_out {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.custom-crd .card-img {
  width: 50%;
  height: 80%;
  margin-left: 150px;
  padding-left: 0px;
  transition: transform 0.3s ease-in-out;
}

.cards:hover .custom-crd .card-img {
  transform: scale(0.8);
}

.custom-crd {
  height: 290px;
  overflow: hidden;
}

.custom-crd img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 862px) {
  .custom-crd {
    height: 320px;
    overflow: hidden;
  }
  .card-text {
    padding-left: 10px;
    position: relative;

    transform: translateY(-10%);
    padding-top: 20px;
  }
  .card-content {
    position: relative;
    transition: transform 0.3s;
    padding-top: 50px;
  }

  .card-content .small-img {
    opacity: 0;
    position: absolute;
    top: 15% !important;
    left: 30px !important;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
    display: block !important;
  }

  .cards:hover .card-content {
    transform: none;
  }

  .cards:hover .card-content .small-img {
    opacity: 1;
  }
  .custom-crd .card-img {
    width: 60%;
    height: auto;
    margin-left: 110px;
    padding-left: 0px;
    transition: transform 0.3s ease-in-out;
    display: none !important;
  }
  .cards:hover .custom-crd .card-img {
    transform: none !important;
  }
}
/* Mobile responsiveness */
/* Hover effect for larger screens (md and up) */
@media (max-width: 768px) {
  .custom-crd {
    height: 280px;
    overflow: hidden;
  }

  .new_padding_about {
    padding-top: 40px !important;
  }
  .card-content {
    position: relative;
    transition: transform 0.3s;
  }

  .card-content .small-img {
    opacity: 0;
    position: absolute;
    top: 52%;
    left: 10%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
  }

  .cards:hover .card-content {
    transform: none;
  }

  .cards:hover .card-content .small-img {
    opacity: 1;
  }
  .custom-crd .card-img {
    width: 60%;
    height: auto;
    margin-left: 110px;
    padding-left: 0px;
    transition: transform 0.3s ease-in-out;
    display: none;
  }
  .cards:hover .custom-crd .card-img {
    transform: none;
  }
}

/* section 5 about us  */
.gifsider_padd {
  height: 700px;
}

.gifholer {
  height: 800px;
  width: 85%;
  margin-top: -370px;
}

.gif_video {
  height: 100px;
  width: 250px;
  margin-left: 160px;
}

.pic11 img {
  height: 36px;
  width: 36px;
}

.display_lg {
  display: none !important;
}

@media (max-width: 862px) {
  .gifsider_padd {
    display: none !important;
  }
  .display_lg {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .gifsider_padd {
    display: none !important;
  }
  .display_lg {
    display: block !important;
  }
}
/* section 5 end about us  */

/* section 6 */
.bg_color {
  height: 593px;
  background-color: #8548c7;
  color: #fff;
}
.pink p {
  color: #8555b2;
}
.bg_color img {
  width: 100%; /* Ensure the image is responsive */
}

@media (max-width: 767px) {
  .bg_color {
    height: auto; /* Set the height to auto for mobile devices */
  }
}

.px-padding {
  padding-left: 20px;
}

.pysix-padding {
  padding-top: 25%;
  text-align: left;
  font-family: Comfortaa;
  font-size: 55px;
}

.pysix {
  text-align: left;
  font-family: Nunito;
}

/* text slider add by tusar  */
/* Add your custom CSS styles here */
.slider-container {
  width: 475px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.slider {
  padding-left: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 2s;
}

.slide {
  position: relative;
  width: 100%;
  height: 33.33%;
  display: flex;
  align-items: center;
  font-size: 24px;
  color: #000; /* Change text color to black */
}

.bold {
  font-weight: bold;
}

.small-font {
  font-size: 18px; /* Adjust the font size as needed */
  /* Add any additional styles you want for the small-font element here */
  font-family: Nunito;
  line-height: 27px;
}

.vertical-line {
  position: absolute;
  width: 2px;
  height: 20%;
  background-color: #e3c3fa;
  top: 95px;
  left: 8%;
  transform: translateX(-50%);
}

.vertical-line2 {
  position: absolute;
  width: 2px;
  height: 18%;
  background-color: #e3c3fa;
  top: 235px;
  left: 8%;
  transform: translateX(-50%);
}

.vertical-line3 {
  position: absolute;
  width: 2px;
  height: 18%;
  background-color: #e3c3fa;
  top: 365px;
  left: 8%;
  transform: translateX(-50%);
}

.vertical-line4 {
  position: absolute;
  width: 2px;
  height: 18%;
  background-color: #e3c3fa;
  top: 495px;
  left: 8%;
  transform: translateX(-50%);
}
.vertical-line5 {
  position: absolute;
  width: 2px;
  height: 18%;
  background-color: #e3c3fa;
  top: 635px;
  left: 8%;
  transform: translateX(-50%);
}

/* last day add  */

/* old card start  */

.padding_out_new {
  padding-left: 10px;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.about_cards {
  position: relative;
  overflow: hidden;
  height: 345px; /* Set the fixed height of the card */
}

.small_img1 {
  display: none;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform: scale(1);
  opacity: 1;
  width: 50%; /* Increase the width to 120% */
  height: auto; /* Adjust the height if necessary */
  top: 20%; /* Adjust the top position as needed */
}

.big-img {
  position: absolute;
  top: 0;
  left: 40%;
  width: 60%; /* Increase the width to 120% */
  height: 55%; /* Adjust the height if necessary */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform: scale(1);
  opacity: 1;
}

.card_txt {
  font-weight: bold;
  font-family: Nunito;
  line-height: 32px;
  font-size: 24px;
}

.about_cards:hover .big-img {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform: scale(0.8) translateX(-100%);
  opacity: 0;
}

.about_cards:hover .small_img1 {
  display: block;
  transform: scale(0.5);
  opacity: 1;
  top: 20%; /* Adjust the top position as needed */
}

.about_cards:hover .card-content_about {
  transition: transform 0.3s ease-in-out;
  transform: translateY(-50%);
}

.card-content_about {
  padding-top: 135px;
  transition: translateY(80%) transform 0.3s ease-in-out;
}

.card-content_about h5 {
  margin-bottom: 5px;
}

.card-content_about hr {
  margin: 29px 0;
}

.card-content_about p {
  margin: 0;
}

.about_cards {
  flex: 0 0 calc(33.333% - 10px); /* 33.333% width with padding */
  background: var(
    --glass-morph-glass-fill-2,
    linear-gradient(
      181deg,
      rgba(255, 255, 255, 0.5) 1.15%,
      rgba(255, 255, 255, 0) 98.91%
    )
  );
  backdrop-filter: blur(30px);
  border: 2px solid var(--glass-morph-glass-stroke-1, rgba(255, 255, 255, 0.5));

  border-radius: 20px; /* Top left corner border radius */

  padding: 30px;
  overflow: hidden;
  background: linear-gradient(
    155.31deg,
    rgba(255, 255, 255, 0.5) 12.33%,
    rgba(255, 255, 255, 0) 34.31%,
    rgba(255, 255, 255, 0) 52.66%,
    rgba(255, 255, 255, 0.54) 74.67%
  );
  opacity: 2;
  position: relative;
}

.card-con .about_cards {
  flex: 1;
  margin: 10px; /* Adjust the margin to control the spacing between cards */
}

/* Landscape orientation */
@media (max-width: 958px) {
  .land_out {
    display: none;
  }
  .land_in {
    display: block !important;
  }

  .about_cards {
    flex: 0 0 calc(33.333% - 10px); /* 33.333% width with padding */
    background: var(
      --glass-morph-glass-fill-2,
      linear-gradient(
        181deg,
        rgba(255, 255, 255, 0.5) 1.15%,
        rgba(255, 255, 255, 0) 98.91%
      )
    );
    backdrop-filter: blur(30px);
    border: 2px solid
      var(--glass-morph-glass-stroke-1, rgba(255, 255, 255, 0.5));

    border-radius: 20px; /* Top left corner border radius */

    padding: 2px;
    overflow: hidden;
    background: linear-gradient(
      155.31deg,
      rgba(255, 255, 255, 0.5) 12.33%,
      rgba(255, 255, 255, 0) 34.31%,
      rgba(255, 255, 255, 0) 52.66%,
      rgba(255, 255, 255, 0.54) 74.67%
    );
    opacity: 2;
    position: relative;
  }
  .about_cards {
    position: relative;
    overflow: hidden;
    height: 350px; /* Set the fixed height of the card */
  }

  .card-content_about {
    padding-top: 161px;
    transition: translateY(80%) transform 0.3s ease-in-out;
  }

  .small_img1 {
    display: none !important;
  }

  .card-content_about hr {
    margin: 0 0;
  }
}

/* GIF slider styles */
.gif-slider-img {
  width: 100%;
  height: 100%;
  display: none;
}

.gif-slider-img.active {
  display: block;
}

.slider-container {
  position: relative;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex: 0 0 auto;
  width: 100%;
}

/* Add your existing styles here */
.padding_out_new {
  padding-left: 10px;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.gif_video {
  z-index: 2;
}

/* form group  */
.mir {
  margin-left: -15px;
}

.pad_top {
  padding-bottom: 80px;
}

.gif-container img {
  height: 300px;
  width: 300px;
}

.another_submi {
  display: none;
}

.form-section {
  transition: opacity 0.5s ease-in-out;
}

/* tusar add  */
.slider1 {
  margin-top: -100px;
  height: 200px !important;
  width: 200px !important;
  margin-left: 200px;
}

.gifholder .gifholder1 {
  margin-top: -400px;
  height: 800px;
  width: 600px;
}

.crd_size {
  width: 625px;
}
.mpb {
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 50px;
}

/* Add your styles here */
#rotated {
  transition: transform 0.5s ease-in-out;
}

.gifholder2 {
  margin-left: 50px;
  margin-top: -230px;
  height: 480px;
  width: 480px;
}

.QR {
  margin-left: 540px;
  margin-top: -100px;
}

/* popup tab */

.popup-tab {
  display: none;
  position: absolute;
  border-radius: 5px;
  z-index: 4;
}

.PopMargin {
  margin-left: -350px;
  margin-top: -150px;
}

#closePopup {
  background: transparent;
  border: none;
  cursor: pointer;
  padding-left: 440px;
  padding-top: 0;
}

.qr_default {
  justify-content: center;
}

.popcard_new {
  box-shadow: 0px 1.1966018676757812px 29.91504669189453px 0px #452a7c1a;
  border: 2px solid;
  border-image-source: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-image-slice: 1;
  padding: 20px;

  max-width: 630px;
  text-align: center;
}
.btn_container {
  padding-left: 130px;
  padding-right: 130px;
}

.button-container {
  display: flex;
}

.button-container button {
  background: none;
  border: none;
  cursor: pointer;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 5px;
}

.iso1.active,
.iso2.active {
  background-color: white;
}
.iso {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 5px;
  display: flex;
  align-items: center; /* Center items vertically */
}

.x_btn img {
  height: 30px;
  width: 30px;
  margin-left: -10px;
}

@media (max-width: 767px) {
  .QR {
    display: none; /* Hide the image on screens with a width of 767 pixels or less */
  }
}

.cards-container p {
  font-size: 20px;
}

.txt_pdl p {
  padding-left: 12px;
  padding-top: 6px;
}

.img-fluid img {
  margin-top: -90px;
}
.img-fluid2 img {
  margin-top: -30px;
}
.tt {
  font-size: 15px;
}
.flogo {
  margin-left: -70px;
}

@media (max-width: 884px) {
  .qr_img {
    display: none !important;
  }
}

.txt_slider {
  height: 600px;
}
.nn_left_txt {
  line-height: 36px;
}
.nn_left_txt img {
  padding-left: 5px;
}
.zoom {
  transform: scale(1.04); /* Adjust the scale factor as needed */
  transition: transform 0.1s;
}

@media (max-width: 1366px) {
 .qr_i a{
  margin-left: -100px;
 }
  .vid_img img{
margin-left: -100px;
margin-top: -35px;
height: 150px;
width: 150px;
 }
 
}



/* newly added for mobile devices */
.section-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
}

.left-icon {
  margin-right: 20px;
  /* Add your icon styling here */
}

.right-button {
  color: #000f1f;
  background: transparent; 
  border: 1px solid #000f1f; 
  border-radius: 20px; 
  padding: 10px 20px; 
}

.right-btn {
  color: #000f1f;
  background: transparent; 
  padding: 10px 20px; 
}

.mnu_btn a {
  text-decoration: none;
  color: #000;
}

@media (min-width: 854px) {
  /* Hide the login button on devices with a maximum width of 767 pixels (e.g., mobile devices) */
  .nav-item_h a {
    display: none !important;
  }
  .navbar-rightbtn{
    display: none;
  }
}


@media (max-width: 767px) {
  /* Hide the login button on devices with a maximum width of 767 pixels (e.g., mobile devices) */
  .navbar-right {
    display: none;
  }
}



/* customer page  */
.customer4 img{
  width: 420px;
  height: 220px;
  margin-top: -50px;
  margin-left: -50px;
  margin-right: -50px;
  
}


.txt_clr_date{
  color: #787878;
}


/* newday  */


.panel-heading [data-toggle="collapse"]:after {
  font-family: 'Nunito';
  content: "\e072"; /* "play" icon */
  float: right;
  color: #F58723;
  font-size: 18px;
  line-height: 22px;
  /* rotate "play" icon from > (right arrow) to down arrow */
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.panel-heading [data-toggle="collapse"].collapsed:after {
  /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  color: #454444;
}

.namecustomer{
  font-size: 24px;
}






/* (A) GALLERY WRAPPER */
/* (A1) BIG SCREENS - 3 IMAGES PER ROW */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  max-width: 1200px; /* optional */
  margin: 0 auto; /* optional */
}
 
/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
@media screen and (max-width: 768px) {
  .gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
 
/* (B) GALLERY VIDEOS */
/* (B1) THUMBNAIL VIDEO */
.gallery video {
  width: 100%;
  height: 200px;
  object-fit: cover; /* fill | contain | cover | scale-down */
  cursor: pointer;
}
 
/* (B2) FULLSCREEN VIDEO */
.gallery video.full {
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  background: #000;
  object-fit: scale-down;
}
 
/* (C) EXIT FULLSCREEN */
#vClose {
  position: fixed; display: none;
  top: 0; right: 0; z-index: 9999;
  font-size: 20px; font-weight: 700;
  padding: 10px 15px;
  color: #fff;
  background: #741414;
  cursor: pointer;
}
#vClose.show { display: block; }






.nav-item {
  margin: 0 15px;
}



.vfeed p{
  font-size: 27px;
}


@media (max-width: 768px) {
  .vid_img img {
    display: none;
  }
  
  .vfee p{
    font-size: 18px;
  }
}