.ms-projects-wrapper-main {
   font-family: 'Jost', Sans-serif;
}

.ms-products-slider-section {
   overflow: hidden !important;
}

.ms-products-swiper-nav-container {
   display: flex;
   gap: 12px;
   justify-content: flex-end;
   margin-top: 40px;
   max-height: 40px;
}

.ms-products-swiper-nav-container img {
   cursor: pointer;
}

.ms-projects-wrapper-main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-column-gap: 34px;
   grid-row-gap: 40px;
   font-family: 'Jost', Sans-serif;
}

.ms-projects-wrapper-main img {
   display: block;
}

.ms-projects-wrapper-main .ms-projects-image img {
   width: 100%;
	min-width: 540px;
	max-height: 360px;
	max-width: 540px;
	min-height: 360px;
}

.ms-projects-wrapper-main .ms-projects-name {
   font-size: 24px;
   font-weight: 500;
   line-height: 33.6px;
   text-align: left;
   margin-top: 40px;
   margin-bottom: 24px;
   color: #000;
}

.ms-projects-wrapper-main .ms-projects-content {
   font-size: 14px;
   font-weight: 400;
   line-height: 21px;
   text-align: left;
   color: #35363a;
}

.ms-projects-wrapper-main .ms-products-location-flex {
   display: flex;
   gap: 6px;
   align-items: center;
}

.ms-projects-wrapper-main .ms-products-location-flex p {
   margin: 0;
   color: #6d748e;
   font-size: 14px;
   font-weight: 400;
   line-height: 16.8px;
   letter-spacing: 0.02em;
   text-align: center;
}

.ms-projects-wrapper-main .ms-projects-item {
   position: relative;
}

.ms-projects-wrapper-main .ms-projects-category {
   position: absolute;
   top: 6px;
   left: 12px;
   z-index: 10;
   color: #2c2626;
   font-size: 13px;
   font-weight: 500;
   line-height: 15.6px;
   letter-spacing: 1px;
   text-align: left;
   text-transform: uppercase;
}

@media screen and (max-width: 768px) {
   .ms-projects-wrapper-main {
      grid-template-columns: 1fr;
   }

   .ms-projects-wrapper-main .ms-projects-name {
      margin-top: 25px;
      margin-bottom: 14px;
   }
}

/* *********************** */
/* stylings for popup */
/* *********************** */
#ms-projects-popup-background {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(10px);
   z-index: 999999999;
   display: none;
}

#ms-projects-popup {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #2e388e;
   padding: 45px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   z-index: 999999999;
   width: 80vw;
   height: max-content;
   display: none;
   overflow-y: auto;
}

#ms-projects-popup-content .ms-popup-error {
   display: flex;
   align-items: center;
   height: 100%;
   margin: auto;
   justify-content: center;
}

#ms-projects-popup-content p {
   color: #fff;
   font-family: 'Jost', Sans-serif;
   margin: 0;
   font-size: 30px;
}

#ms-projects-popup-content img {
   /* max-width: 1000px;
   min-width: 1000px;
   min-height: 560px; */
   object-fit: cover;
   display: block;
   width: 100%;
   height: 500px;
   max-width: 60%;
   min-width: 60%;
}

#ms-projects-popup-close {
   display: block;
   color: white;
   border: none;
   cursor: pointer;
   position: absolute;
   top: 6px;
   right: 6px;
   z-index: 99999;
   width: 35px;
   height: auto;
}

.ms-projects-image-container-inner {
   position: absolute;
   bottom: 16px;
   left: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
}

.ms-projects-gallery {
   display: flex !important;
   gap: 32px !important;
   flex-wrap: nowrap !important;
   padding-bottom: 16px;
   overflow-x: scroll;
}

.ms-projects-gallery::-webkit-scrollbar {
   height: 8px;
}

.ms-projects-gallery::-webkit-scrollbar-track {
   background: #f3811e4d;
}

.ms-projects-gallery::-webkit-scrollbar-thumb {
   background: #f3801e;
   cursor: pointer;
}

.ms-projects-gallery-icon {
   background: rgba(0, 0, 0, 0.51);
   width: 90px;
   height: 48px;
   border-radius: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
}

.ms-projects-video-icon {
   background: rgba(0, 0, 0, 0.51);
   width: 90px;
   height: 48px;
   border-radius: 80px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
}

.ms-projects-video-icon a {
   display: flex;
   flex-direction: row-reverse;
   gap: 6px;
   font-family: Jost;
   font-size: 14px;
   font-weight: 600;
   line-height: 16.8px;
   text-align: left;
   color: #fff;
   align-items: center;
}

.ms-projects-video-icon a:hover {
   color: #fff;
}

.ms-projects-image-count {
   display: block;
   color: #fff;
   font-family: Jost;
   font-size: 14px;
   font-weight: 600;
   line-height: 16.8px;
   text-align: left;
}

.ms-projects-image-container {
   position: relative;
}

.ms-projects-gallery-icon img {
   cursor: pointer;
}

#ms-preloader {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 999999999;
}

#ms-preloader .spinner {
   width: 40px;
   height: 40px;
   border: 4px solid #f3801e;
   border-top: 4px solid #ffdcbc;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

@media screen and (max-width: 900px) {
   #ms-projects-popup-content img {
      height: 450px;
      max-width: 80%;
      min-width: 80%;
   }
}

@media screen and (max-width: 600px) {
   #ms-projects-popup-content img {
      height: 300px;
      max-width: 80%;
      min-width: 80%;
   }
	
	.ms-projects-wrapper-main .ms-projects-image img {
		width: 100%;
		min-width: initial;
		max-height: 200px;
		max-width: initial;
		min-height: 200px;
		height: auto;
		object-fit: cover;
	}
}

@media screen and (max-width: 450px) {
   #ms-projects-popup {
      width: 93vw;
      padding: 45px 20px 25px 20px;
   }

   .ms-projects-gallery {
      gap: 16px !important;
   }

   #ms-projects-popup-content img {
      height: 260px;
      max-width: 85%;
      min-width: 85%;
   }
}