@media screen and (max-width:767px) {
	.home_slider .item .image-wrapper img {height:450px;}
	.home_slider .item .image-wrapper img {height:450px; object-fit:cover;}
}
.home_slider .image-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
	z-index: 1;
}

.home_slider .image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.home_slider .image-wrapper .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Black overlay with 40% opacity */
  pointer-events: none; /* So overlay doesn’t block clicks */
}
.home_slider .owl-nav .owl-next span {
    background-color: #006d5b;
    background-image: url('../img/right-arrow.png'); /* Replace with your image path */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 45%;
    right: 0px;
    text-indent: -9999px;
    overflow: hidden;
    border-radius: 0px;
    /* Smooth transition for transform and position */
    transition: transform 0.3s ease, right 0.3s ease, top 0.3s ease;
}
@media (max-width: 768px) {
    .home_slider .owl-nav .owl-next span {
        right: 0px; /* Pull it inward from the edge */
        top: 45%; /* Adjust if needed for alignment */
        transform: translateY(-45%); /* Vertically center if needed */
    }
}

  .home_slider .owl-nav .owl-prev span {
		background-color: #006d5b;
		background-image: url('../img/left-arrow.png'); /* Replace with your image path */
		background-repeat: no-repeat;
		background-position: center center; /* Ensures exact center */
		background-size: 20px 20px;
		width: 40px; /* Match with image and background */
		height: 40px;
		position: absolute;
		top: 45%;
		left: 0px;
		text-indent: -9999px; /* Hide any text */
		overflow: hidden;
		border-radius: 0px; /* Optional: for rounded look */
		/* Smooth transition for transform and position */
		transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
	}
@media (max-width: 768px) {
    .home_slider .owl-nav .owl-prev span {
        left: 0px; /* Pull it inward from the edge */
        top: 45%; /* Adjust if needed for alignment */
        transform: translateY(-45%); /* Vertically center if needed */
    }
}
.home_slider .owl-nav{
	line-height: 0px;
}
.home_slider .slider-text {
    color: #fff;
    font-weight: bold;
	 z-index: 3; /* Higher than overlay */
    position: relative;
    pointer-events: auto; /* Allow clicking */
}
.home_slider .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;   /* Vertically center */
    justify-content: center; /* Horizontally center */
    text-align: center;
    background: rgba(0, 0, 0, 0.3); /* Optional dark overlay */
	z-index: 2; /* Make sure it's above the image */
    pointer-events: auto; /* Allow clicking inside */
}
.home_slider .overlay h1{
	letter-spacing: 3px;
	font-size: 32px;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
		  }
.home_slider .read-more-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #006d5b;
    color: #fff;
	border: 1px solid #FFFFFF;
    text-decoration: none;
    font-weight: 300;
    border-radius: 0px;
    transition: background-color 0.3s ease;
	letter-spacing: 2px;
}

.home_slider .read-more-btn:hover {
    background-color: #004d41; /* Darker green on hover */
}

#vessel_carousel{
	position: relative;
	background-image: url('../img/vessel_bg.jpg');
	background-size: cover;       /* Ensures the image covers the entire container */
	background-position: center;  /* Centers the image */
	background-repeat: no-repeat; /* Prevents the image from repeating */
	z-index: 0;
	overflow: hidden;
}
#vessel_carousel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* black with 50% opacity */
  z-index: 1;
}
#vessel_carousel > * {
  position: relative;
  z-index: 2; /* ensures content sits above the overlay */
}
#vessel_carousel h4{
	color: #ffffff;
	letter-spacing: 1px;
	font-weight: 300;
}
#vessel_carousel .custom-card {
  overflow: hidden;
}
#vessel_carousel .bottom-text-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;           /* Set square width */
  height: auto;          /* Set square height */
  background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 0px;
}
#vessel_carousel .bottom-text-box p{
letter-spacing: 1px;
font-size: 14px;
}
.vessel_slider .owl-dots {
  text-align: center;
  margin-top: 20px;
}
.vessel_slider .owl-dot span {
  width: 15px;
  height: 15px;
  background: #ccc;
  display: inline-block;
  margin: 5px;
  border-radius: 50%;
}
#vessel_carousel .owl-dot.active span {
  background: #000;
}
/* Position nav arrows absolutely inside the carousel */
#vessel_carousel .owl-carousel .owl-nav {
  position: absolute;
  top: 45%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0px 10px;
  pointer-events: none; /* Allow clicks to pass through nav container */
  z-index: 10;
}

#vessel_carousel .owl-carousel .owl-prev {
    background-image: url('../img/left-arrow.png'); /* 🔁 Replace with your image URL or path */
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: transparent;        /* Hide default icon/text */
    font-size: 0;              /* Prevent unwanted character spacing */
    width: 40px;
    height: 40px;
	top: 40%;
    position: absolute;
    left: 10px;
    pointer-events: auto;
    border-radius: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    border: none;
}
#vessel_carousel .owl-carousel .owl-next{
	background-image: url('../img/right-arrow.png'); /* Replace with your image path */
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.5); /* Optional background behind the icon */
    color: transparent; /* Hide any text or icon */
    width: 40px;
    height: 40px;
    position: absolute;
	top: 40%;
    right: 0px;
    pointer-events: auto;
    border-radius: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    border: none;
    font-size: 0; /* Hide any text inside the button */
}
#vessel_carousel .owl-carousel .owl-nav button.owl-prev:hover,
#vessel_carousel .owl-carousel .owl-nav button.owl-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}