/* Slide styling */

/* banner  */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Background image styling */
.intro__background img {
  width: 100%;
  height: 100%;
  /* height: 900px; */
  object-fit: cover; /* Ensures the background image fills the screen */
}

/* Ensures the titles are always visible on top */
.headline {
  position: absolute;
  top: 20px; /* Adjust based on where you want the title */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  transition: opacity 0.5s ease-out; /* Smooth fade transition */
}

/* Styling for title */
.headline__title {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 10px;
}

/* Styling for subtitle */
.headline__subtitle {
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
}

/* Hide the title when .hide-text class is added */
.headline.hide-text {
  opacity: 0;
  pointer-events: none;
}

/* Optional: Styling for swiper navigation buttons */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  opacity: 0.7;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1;
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
  /* Adjust headline position and font sizes for mobile */
  .headline {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  .headline__title {
    font-size: 1.5rem; /* Smaller font size */
  }

  .headline__subtitle {
    font-size: 1rem; /* Smaller subtitle font size */
  }

  /* Adjust image height for mobile */
  .intro__background img {
    height: 400px; /* Reduce height for smaller screens */
    object-fit: cover;
  }
}
@media (max-width: 1200px) {
  .main__intro{
  /* height: 900px; */
  }
}
@media (max-width: 480px) {
  /* Further adjustments for smaller mobile screens */
  .headline__title {
    font-size: 1.2rem;
  }

  .headline__subtitle {
    font-size: 0.9rem;
  }

  .intro__background img {
    height: 300px; /* Even smaller height for very small screens */
  }
  .main__intro{
      height: 350px;
  }
}

/* banner  */


/* navbar   */


/* Basic styling for the dropdown menu */
.menu__item {
position: relative;
}


.dropdown-menu {
display: none; /* Hidden by default */
position: absolute;
top: 100%; /* Position below the parent link */
left: 29px;
/* background-color: white; */
list-style-type: none;
padding: 10px 0;
margin: 0;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
}


.dropdown-menu li {
padding: 8px 20px;
}

.dropdown-menu li:hover {
background-color: #f0f0f0; /* Highlight on hover */
}

.dropdown-menu a {
text-decoration: none;
color: #333;
display: block;
font-size: 14px;
font-weight: 500;
}

@media (max-width: 480px) {
.dropdown-menu{
  bottom: 100%; /* Position below the parent link */
  left: 0px;
  top: -123px;
}
}

/* Banner Text - Positioned in the Middle-Right */
/* Banner Text - Positioned in the Middle-Right */
.banner-text {
position: absolute;
top: 53%;
/* right: 5%; */
left: 6%;
transform: translateY(-50%); /* Adjust for perfect centering */
font-size: 5rem; /* Large text */
color: #fff;
font-weight: bold;
text-transform: uppercase;
z-index: 20;
opacity: 1;
transition: opacity 0.5s ease-out;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
white-space: nowrap; /* Prevent text from wrapping */
 text-shadow: 5px 5px 15px rgb(17 16 16 / 90%), 2px 2px 10px rgb(247 245 245 / 70%), 0px 0px 5px rgb(229 218 218 / 50%);
}

/* Hide the text during slide transition */
.banner-text.hide-text {
opacity: 0;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
.banner-text {
  font-size: 4rem; /* Slightly smaller for medium screens */
  right: 3%;
}
}

@media (max-width: 768px) {
.banner-text {
  font-size: 3rem; /* Smaller text for tablets */
  right: 3%; /* Adjust position */
}
}

@media (max-width: 480px) {
.banner-text {
  font-size: 2rem; /* Smaller text for mobile */
  right: 2%;
}
}







  /* //////////////// blinking border start ///////////////////////////// */
  .blinking-border {
    
    border: 1px solid #cc0000 ;
    outline: 1px solid #cc0000 ;
    animation: blink ease-in-out 1.5s infinite ;
}

@keyframes blink {
        0% {
            border-color: #cc0000 ;
            outline-color: #cc0000 ;
        }
        50% {
            border-color: transparent ;
            outline-color: transparent ;
        }
        100% {
            border-color: #cc0000 !important;
            outline-color: #cc0000 !important;
    }
}

/* //////////////// blinking border start end///////////////////////////// */
.mxd-background {
background-image: url('shiva-orange.png');
background-size: cover;
}

@media (max-width: 768px) {
.swiper-button-prev:after, .swiper-button-next:after{
  font-size: 17px;
}


}
/* @media (max-width: 449px) {
.portfolio-stack{
  height: 300px;
}
} */