html {
    scroll-padding-top: 80px; /* Adjust based on menu height */
}

/* JR-POST-GRID-STYLES */
.custom-posts-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
	/* flex-wrap: wrap;
	justify-content:space-between; */
}

.custom-post-item {
    border: 1px solid #ddd;
	width:100%;
	transition: transform 0.3s ease;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);

}
/* .custom-post-item:hover  {
    transform: translateY(-20px); 
} */

.popup-content {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      max-height: 500px;
      background: white;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      transition: opacity 0.3s ease;
      z-index: 10;
      overflow-y: auto; /* Makes the popup scrollable if content overflows */
	  
    }
/* Appear below thumbnail */
.popup-bottom {
  top: 105%;
}

/* Appear above thumbnail */
.popup-top {
  bottom: 105%;
}
.custom-post-item:hover .popup-content {
      visibility: visible;
      opacity: 1;
    }

.custom-post-content{padding:0 15px;}

.custom-post-title {
}

.custom-post-description {
}
.custom-post-tags{
	padding:15px;    margin-bottom: 15px;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}
.button-tag{
	    padding: 7px 10px;
    margin-right: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #ddd;
    border-radius: 10px;
}
.project_link{
	display:inline-block;
	padding:5px 15px;
}
.custom-post-thumbnail {
    position: relative;
    overflow: hidden; /* Ensure the image doesn't exceed the container's boundaries */
}




.custom-thumbnail{
	width: 100%;
	height:auto;
	object-fit: cover;
}
.project_header{
	
}
.project_header img{
	width:100%;
}
.project-main-content{
	padding:15px 30px;
}
.jquery-modal{z-index: 99999 !important;}
.modal{max-width:80% !important;padding:0 !important;}

#contactModal{
	/* display:none; */
}

/* Sticky header */
#site-header{
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #165e9b; /* Optional: Change background color */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); */
	transition: background-color 0.3s ease-out;
}
.header-inner{
	width: 85% !important;
	justify-content: start !important; 
    gap: 0 60px !important;
}
ul#menu-topmenu{
	
}
ul#menu-topmenu a{
	    font-size: 100% !important;
    /* font-weight: bold !important; */
    text-transform: uppercase !important;
	color:#fff !important;
	white-space: nowrap !important;
}

ul.sub-menu{
	background-color: #165e9b !important;
}

/* Add shadow when scrolled */
/* #site-header.scrolled {
    background-color: #165e9b !important;
}
#site-header.scrolled ul.menu a{
	 color:#fff !important;
} */

/* #menu-topmenu .sub-menu a, #site-header.scrolled ul.sub-menu a{
	color:#333 !important;
} */

/* .site-navigation ul.menu li.menu-item-has-children:after {
    position: absolute;
    left: 80%;
    top: 50%;
} */

.site-title a{
	color:#fff !important;
}


/* #site-header.scrolled .site-title a{
	color:#fff !important;
} */

#site-navigation {
    display: flex;
    justify-content: center; /* Centers the menu */
    width: 100%;
}


.wpcf7-form .wpcf7-submit{
	    display: block !important;
    margin: 0 auto !important;
}


/* .custom-blockquote-widget {
    text-align: center;
    max-width: 600px;
    margin: auto;
}

blockquote {
    font-size: 1.5rem;
    font-style: italic;
    border-left: 5px solid #165E9B;
    padding: 20px;
    position: relative;
    background-color: #f9f9f9;
    border-radius: 10px;
}

.quote-icon {
    font-size: 2rem;
    color: #165E9B;
    margin-bottom: 10px;
    display: block;
}

.author-name {
    display: block;
    font-weight: bold;
    margin-top: 10px;
    color: #165E9B;
}

.author-title {
    display: block;
    font-size: 0.9rem;
    color: #777;
} */

.modal-spinner {
    background-color: #165e9b !important;
    height: 40px !important;
}

.popup-close{display:block;text-align:center;padding:10px 0;}

@media only screen and (max-width: 600px) {
  .custom-posts-list{
	  flex-direction:column !important;
  }
  .custom-post-item{
	  width:100% !important;
  }
}