.bg-port-container {
	background: #f5f5f5;
	position: relative;
	padding: 130px 0 0 0;
}

.card-custom {
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	background-color: #fff;
	padding: 20px;
	margin-bottom: 20px;
}

.Livspace-port div div p {
	font-size: 14px;
	line-height: 1.2;
	font-weight: 500;
}

.badge-custom {
	background-color: #5eafba;
    color: #fff !important;
	margin-right: 5px;
}

.get-started-btn,
.enquire-btn {
	background-color: #ef4f5f;
	color: #fff;
	border: none;
}

.get-started-btn:hover,
.enquire-btn:hover {
	background-color: #d43749;
}

.brand-logo {
	height: 80px;
	width: 80px;
	margin: 10px;
	border: 1px solid #ccc;
	border-radius: 10px;
}

.highlight-icon {
	width: 50px;
	height: 50px;
}

.get-started {
	position: relative;
	background: #e38b6f;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 20px;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s;
	/* border: 1px solid #fff; 
	box-shadow: 0 1px 1px 1px rgb(255 255 255 / 30%);*/
	font-weight: bold;
	letter-spacing: 0.5px;
}

.get-started:hover {
	background: #d1785c;
}

.second-text {
	color: #1a1a1a;
}

.heading-port p {
	margin-bottom: 0;
	font-size: 12px;
}

.heading-port strong {
	font-size: 14px;
}

.proj-detail-disc {
	font-size: 14px;
	color: #1a1a1a;
}

.right-panel-estimate {
	/* background: #5eafba; */
	box-shadow: 0 1px 1px 1px rgb(94 175 186 / 50%);
}

.right-panel-estimate h5 {
	color: #1a1a1a;
    font-weight: bold;
}

.accordion-button:focus,
.accordion-button:not(.collapsed) {
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-bottom: 1px solid #ccc !important;

}

.search-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	padding: 10px 15px;
	gap: 10px;
	max-width: 100%;
	overflow-x: auto;
}

.search-bar input,
.search-bar select,
.search-bar button {
	border: none;
	outline: none;
	font-size: 14px;
	padding: 10px 15px;
	border-radius: 10px;
	white-space: nowrap;
}

.location {
	background: #fde7e7;
	color: #d33;
	display: flex;
	align-items: center;
	min-width: 100px;
	flex-shrink: 0;
}

.search-bar input[type="text"]:not(.location) {
	flex-grow: 1;
	background: #f9f9f9;
	min-width: 120px;
}

.dropdown,
.budget {
	background: #f9f9f9;
	color: #333;
	flex-shrink: 0;
}

.search-btn {
	background-color: #e38b6f;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s ease;
	flex-shrink: 0;
}

.search-btn:hover {
	background-color: #d1785c;
}
.gallery-container {
	display: flex;
    height: 440px;
	column-gap: 4px
}

.main-image {
    flex-basis: 60%;
}

.main-image img {
    display: block;
    vertical-align: middle;
	max-width: 100%;
	/* height: 100%; */
	object-fit: cover
}

.side-images {
	display: flex;
	flex-basis: 40%;
	flex-direction: column;
	gap: 4px;
	height: 440px;
	position: relative;
}
.inner-div-img {
	display: grid;
	height: 50%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
}

.side-images img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.side-images img.hidden {
  display: none;
}



.side-images img.hidden {
  display: none;
}

/* Place See All button in bottom right */
#seeAllBtn {
	grid-column: 2 / 3;
	align-self: end;
	justify-self: end;
	padding: 8px 14px;
	background-color: #ffffff;
	border: 1px solid #aaa;
	border-radius: 20px;
	font-weight: bold;
	cursor: pointer;
	z-index: 10;
	position: absolute;
	bottom: 10px;
	right: 10px;
}
#port-gallery-mobile {
	display:none;
}
/* Overlay background */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Popup box */
.popup-box {
	 background: white;
	padding: 0;
	border-radius: 0;
	position: relative;
	width: 100%;
	text-align: center;
	height: 100%;
}
.popup-inner-body {
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
}
.popup-inner-body img {
    margin: 10px auto;
    max-width: 100%;
	height: 100%;
}
/* Close button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

/* Show popup */
.popup-overlay.show {
  display: flex;
  overflow-x: hidden !important;
}
.video-text {
	font-weight: bold;
	color: #fff;
	margin-left: 5px;
}
.brochure-text {
	font-size: 18px;
	font-weight: bold;
	color: #1a1a1a;
	margin-left: 5px;
}
.view-video-btn {
	position: relative;
    background: #fff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
	box-shadow: 0 1px 1px 1px rgb(94 175 186 / 50%);
}
.view-video-btn:hover {
	box-shadow: 0 2px 3px 2px rgb(94 175 186 / 50%);
}
/* Mobile View */
@media (max-width: 1200px) {
	.side-images,
	.gallery-container	{
		height: 280px;
	}
}
@media (max-width: 768px) {
	.bg-port-container {
		padding: 70px 0 0 0;
		background: #fff;
	}
	#port-gallery-desktop {
		display: none;
	}
	#port-gallery-mobile {
		display: block;
	}
	#port-gallery-mobile .carousel-item img {
		aspect-ratio: 5 / 2;
	}
	.search-bar {
		flex-direction: column;
		align-items: stretch;
		border-radius: 20px;
		padding: 15px;
	}

	.search-bar input,
	.search-bar select,
	.search-bar button {
		width: 100%;
		margin-bottom: 10px;
		padding: 12px;
		border-radius: 10px;
	}

	.search-bar input:last-child,
	.search-bar select:last-child,
	.search-bar button:last-child {
		margin-bottom: 0;
	}

	.brand-area-port {
		justify-content: space-around;
	}
	.gallery-container {
		flex-direction: column;
	}

	.side-images {
		grid-template-columns: repeat(2, 1fr);
	}
}