/* main page csss */
body{
    background-color: black;
}

.nav-item{
    font-size: 23px;
}

.nav-link { /* Targets all navbar link elements */
  color: white; /* Set default text color */
  transition: transform 0.2s ease-in-out; /* Add transition for smooth animation */
}

.nav-link:hover { /* Applies to links on hover */
  color: #ff8400; /* Set hover color (adjust as needed) */
  transform: translateY(2px); /* Slight upward float on hover */
}


.ayush{
  color: aliceblue;
  text-align: start;
  padding-left: 100px;
}


.container-au {
  position: relative; /* Enable relative positioning for card animation */
  width: fit-content; /* Adjust width as needed */
  margin: 0 auto; /* Center container horizontally */
}

.image-wrapper {
  position: relative; /* Enable relative positioning for image and card */
  overflow: hidden; /* Hide overflowing content in card */
}

.image-au {
  position: relative;
  width: 450px;
  height: 620px; /* Adjust image size as needed */
  transition: transform 0.5s ease-in-out; /* Smooth transition on click */
}

.card-au {
  position: absolute;
  top: 0; /* Align card to top of image initially */
  left: 100%; /* Initially positioned outside the image to the right */
  width: 100%; /* Match image width */
  background-color: #ffffffa2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 20px;
  opacity: 0; /* Initially invisible */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Transition for opacity and left position */
}

.image-wrapper:hover .image-au {
  transform: translateX(0); /* Move image to the left on hover (no vertical movement) */
}

.image-wrapper:hover .card-au {
  opacity: 1; /* Show card on hover */
  left: 0; /* Slide card left to reveal description */
}





.container-ab {
  position:relative; /* Enable relative positioning for card animation */
  width: fit-content; /* Adjust width as needed */
  margin: 0 auto; /* Center container horizontally */
}

.image-wrapper {
  position: relative; /* Enable relative positioning for image and card */
  overflow: hidden; /* Hide overflowing content in card */
}

.image-ab {
  position: relative;
  width: 450px;
  height: 620px; /* Adjust image size as needed */
  transition: transform 0.5s ease-in-out; /* Smooth transition on click */
}

.card-ab {
  position: absolute;
  top: 0; /* Align card to top of image initially */
  left: 100%; /* Initially positioned outside the image to the right */
  width: 100%; /* Match image width */
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 20px;
  opacity: 0; /* Initially invisible */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Transition for opacity and left position */
}

.image-wrapper:hover .image-ab {
  transform: translateX(0); /* Move image to the left on hover (no vertical movement) */
}

.image-wrapper:hover .card-ab {
  opacity: 1; /* Show card on hover */
  left: 0; /* Slide card left to reveal description */
}



.logo-3d {
  transform: rotateY(10deg); /* Initial tilt */
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
  position: absolute; /* Absolute positioning for the top-left corner */
  top: 10px; /* Position it near the top */
  left: 10px; /* Position it near the left */
}

.logo-3d {
  transform: rotateY(0deg); /* Initial state: no tilt */
  transition: transform 0.5s ease-in-out; /* Smooth transition for tilting */
  position: absolute; /* Absolute positioning for top-left corner */
  top: 10px; /* Near the top */
  left: 10px; /* Near the left */
}

.logo-3d:hover {
  transform: rotateY(45deg); /* Tilt to the right at 45 degrees on hover */
}

.company-name {
  position: absolute; /* Absolute positioning */
  top: 10px; /* Position near the top */
  left: 120px; /* Position slightly to the right of the logo */
  color: #ff8400; /* Text color */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.5s ease-in-out; /* Smooth fade-in for text */
  font-family: fantasy;
  font-size: 30px;
}

.logo-3d:hover + .company-name {
  opacity: 1; /* Show the company name when hovering over the logo */
}

.navbar-brand:hover .logo-3d {
  transform: rotateY(180deg); /* Increase tilt on hover */
  opacity: 0; /* Fade out on hover */
}

.navbar-brand:hover .company-name {
  opacity: 1; /* Fade in on hover */
}


.btn-custom {background-color: #ff8400; /* Adjust apply button background color */
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: auto; /* Align button to bottom */
}
.btn-custom:hover {
  background-color: #fadab7 /* Adjust apply button hover color */
}

.card-img-overlay h4.card-title {
  color: rgb(255, 255, 255); /* Change to your desired color */
}
.card-title1 {
  font-size: 23px;
  color: rgb(255, 255, 255); /* Change to your desired color */
}

.card {
  position: relative; /* Enable positioning for description overlay */
  overflow: hidden; /* Hide overflowing content in description */
}

.card-description {
  position:absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 100%; /* Adjust height as needed for full card coverage */
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  color: #fff; /* White text */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out; /* Smooth transition on hover */
  text-align: center;
  padding: 15px; /* Adjust padding for content spacing */
}

.card:hover .card-description {
  opacity: 1; /* Description visible on hover */
}


  #fade-in-text {
    opacity: 0; /* Initial opacity for the entire text container */
    transition: opacity 1s ease-in-out; /* Transition for smooth fade-in */
  }
  
  .text a {
    display: inline-block; /* Make each word an inline block for separate animation */
    opacity: 0; /* Initial opacity for each word */
    transition: opacity 1s ease-in-out, transform 0.5s ease-in-out; /* Combined transitions */
    transform: translateX(0); /* Initial position */
  }
  
  .text a:hover {
    transform: translateX(-30px); /* Move left on hover */
    /* Adjust -20px to your desired distance */
  }
  
  
.join{
  font-size:large;
  padding-left: 580px;
}


.text{
    color: aliceblue;
    font-size: 90px;
    text-align: center;
    font-family:fantasy;
}
.text2{
    color: aliceblue;
    font-size: 50px;
    text-align: center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.text3{
    color: aliceblue;
    font-size: 40px;
    text-align: center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.text31{
  color: aliceblue;
  font-size: 25px;
  text-align: center;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  padding-top: 20px;
  padding-left: 100px; /* Adjust padding as needed */
  padding-right: 100px;
  padding-bottom: 20px;
  display: block; /* Make each anchor element a block-level element */
  margin-bottom: 10px; /* Add spacing between paragraphs */
}

.text32{
  color: aliceblue;
  font-size: 30px;
  text-align: center;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  padding-top: 20px;
  padding-left: 100px; /* Adjust padding as needed */
  padding-right: 100px;
  padding-bottom: 20px;
  display: block; /* Make each anchor element a block-level element */
  margin-bottom: 10px; /* Add spacing between paragraphs */
}


.text12{
padding: 100px;
  color: aliceblue;
  font-size:30px;
  text-align:start;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

.text360{
  
  color: aliceblue;
    font-size: 150px;
    text-align: center;
    /* writing-mode: vertical-rl; */
  
}




/* Set basic styles for the slideshow container */
.slideshow-container {
    max-width: 700px;
    position: relative;
    margin: auto;
  }
  
  /* Hide extra slides by default */
  .mySlides {
    display: none;
    fadein: .5s ease-in-out; /* Optional fade-in animation (requires animation library) */
  }
  
  /* Add a black border and some padding to the images */
  .mySlides img {
    width: 100%;
    height:auto;
    border: 1px solid black;
    padding: 5px;
  }
  
  /* Style the "prev" and "next" buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    background-color: rgba(0,0,0, 0.8); /* Semi-transparent black background */
  }
  
  /* Style the "prev" button on hover */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0, 0.5); /* More transparent black background on hover */
  }
  
  /* Position the "prev" button on the left side of the container */
  .prev {
    left: 0;
  }
  
  /* Position the "next" button on the right side of the container */
  .next {
    right: 0;
  }
  
  /* Current slide (initialized in JavaScript) */
  .active {
    display: block;
  }



.textc{
  font-size: 40px;
}


  
  .image {
    display: flex; /* Enable flexbox for horizontal layout */
    align-items:center; /* Align content vertically within the container (optional) */
    color: aliceblue;
  }
  
  .image2 {
    display: flex; /* Enable flexbox for horizontal layout */
    align-items:center; /* Align content vertically within the container (optional) */
    color: aliceblue;
  }

  .image3 {
    display: flex; /* Enable flexbox for horizontal layout */
    align-items:center; /* Align content vertically within the container (optional) */
    color: aliceblue;
  }

  .image img {
     /* width: 200px; 
    margin-right: 20px; 
        height: 100px;  */
}




/* product page css */
.container1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh; /* Set container height to viewport height */
  }
  
  .card1 {
    background-color: #f0f0f0;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-right: 40px;
    padding-left: 40px;
    height: 350px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgb(255, 255, 255);
    width: 800px; /* Initial card width */

  }

  button {
    justify-content: end;
    background-color: #ff8400; /* Green color */
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
  }
  
  






/* careers page css *//* Careers Page - Dark Theme */

.job-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Adjust spacing between cards if needed */
  margin: 0 auto; /* Center the container horizontally */
  width: 90%; /* Adjust container width as needed */
  height: 100px;
  background-color: #000000; /* Dark background for the container */
  color: #fff; /* Light color for text */
}

.job-card {
  background-color: #343a40; /* Darker background for cards */
  border: 1px solid #444; /* Adjust border color for cards */
  border-radius: 5px;
  padding: 20px;
  width: 100%; /* Adjust card width as needed */
  margin: 10px;
  display: flex; /* Allow side-by-side elements within the card */
}

.company-logo {
  width: 100px;
  height: auto;
  margin-right: 20px;
}

.job-details {
  flex: 1; /* Allow content to fill remaining space */
}

.job-details h3 {
  margin-bottom: 5px;
  font-size: 25px;
}

.job-details p {
  margin-bottom: 5px;
  font-size: 18px;
  line-height: 1.5;
}

.location {
  color: #aaa; /* Adjust location text color for better contrast */
  font-size: 18px;
}

.apply-button {
  background-color: #ff8400; /* Adjust apply button background color */
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: auto; /* Align button to bottom */
}

.apply-button:hover {
  background-color: #fadab7 /* Adjust apply button hover color */
}

  


  /* news carousel */
  .carousel-container {
    overflow:hidden; /* Hide overflowing content */
    width:fit-content; /* Adjust width as needed */
    position: relative; /* Enable positioning of child elements */
    font-size: 60px;
    padding: auto;
    color: aliceblue;
  }
 
  .text41{
    color: aliceblue;
    font-size: 80px;
    text-align:start;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
  .text41 a span:first-child { /* Target first child span within the anchor */
    color: #ff8400; /* Replace with your desired color */
  }


  .text47{
    padding-top: 20px;
    color: rgb(255, 255, 255);
    font-size: 20px;
    text-align:center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
  .text47 a span:first-child { /* Target first child span within the anchor */
    color: #ff8400; /* Replace with your desired color */
  }
  
  

  .text43{
    color: aliceblue;
    font-size: 80px;
    text-align:center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
  .text43 a span:first-child { /* Target first child span within the anchor */
    color: #ff8400; /* Replace with your desired color */
  }



  .text27{
    color: aliceblue;
    font-size: 60px;
    text-align:center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
  .text27 a span:first-child { /* Target first child span within the anchor */
    color: #ff8400; /* Replace with your desired color */
  }

   .text42{
    
    color: aliceblue;
    font-size: 20px;
    text-align:start;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   }



   .carousel-container {
    width: 1300px; /* Adjust width as needed */
    overflow:initial; /* Prevent horizontal overflow */
    /* Other styles for the container */
  }
  
  .carousel-track {
    display: flex; /* Arrange images horizontally */
    animation: scroll 20s linear infinite; /* Animation for scrolling */
    white-space: nowrap; /* Prevent text wrapping within the track */
  }
  
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% * 2.1)); } /* Move 2.1x container width */
  }
  
  /* Add a duplicate carousel track with the same content */
  .carousel-track::after {
    content: "";
    display: block; /* Make it occupy space on the line */
    animation: scroll-duplicate 20s linear infinite; /* Duplicate animation */
    animation-delay:20s; /* Delay the duplicate by the animation duration */
  }
  
  @keyframes scroll-duplicate {
    from { transform: translateX(calc(100% * 2.1)); } /* Start from 2.1x container width */
    to { transform: translateX(0); } /* Move to the beginning after animation */
  }
  

  
  


  
  .footer-content {
    display: flex; /* Enable flexbox for horizontal layout */
    justify-content: space-between; /* Align elements to opposite ends */
  }


  
  .text101{
    color: #ff8400;
    font-size: 35px;
    text-align: start;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.text102{
  color: aliceblue;
  font-size: 25px;
  text-align: start;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}



.text103{
  color: rgba(240, 248, 255, 0.436);
  font-size: 20px;
  text-align: start;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.text103:hover{
  color:  #ff840057;
}
.text104{
  color: rgb(240, 248, 255);
  font-size: 20px;
  text-align: center;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.text77{
  color: #ff8400;
}

.image,
.image2,
.image3 {
  opacity: 0; /* Initial opacity for hidden state */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out; /* Combined transitions */
  /* Initial zoom level (adjust as needed) */
  transform: scale(0.8);
}

.image.fade-in,
.image2.fade-in,
.image3.fade-in {
  opacity: 1; /* Opacity for visible state */
}

.image.zoom-in,
.image2.zoom-in,
.image3.zoom-in {
  transform: scale(1); /* Zoom in to original size */
}