.casestudiesSection { padding: 2.5rem 0 0.5rem; }
.casestudiesSection h2 { color: #252a50; font-family: Comfortaa, cursive; font-size: 1.9rem; font-weight: 700; letter-spacing: 0; line-height: 1.4; margin-bottom: 30px; text-align: center; }
.casestudiesSection .carousel-wrapper { position: relative; display: flex; align-items: center; gap: 10px; }
.casestudiesSection .carousel-container { overflow: hidden; flex: 1; }
.casestudiesSection .carousel-track { align-items: stretch; display: flex; gap: 32px; transition: transform 0.5s ease-in-out; }
.casestudiesSection .property-card { display: flex; flex-direction: column; flex: 0 0 calc(33.333% - 22px); min-width: calc(33.333% - 22px); background: #FFFFFF; overflow: hidden; }
.casestudiesSection .image-container { position: relative; width: 100%; height: 250px; overflow: hidden; background: #F4EEE8; object-fit: cover; object-position: center right; border-radius: 6px 6px 0 0; }
.casestudiesSection .image-track { display: flex; height: 100%; transition: transform 0.4s ease-in-out; }
.casestudiesSection .image-track img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; }
.casestudiesSection .image-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.7); border: none; width: 30px; height: 30px; border-radius: 99px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #2c3e50; opacity: 0; transition: opacity 0.3s, padding: 10px 20px; background 0.3s; z-index: 5; }
.casestudiesSection .property-card:hover .image-nav { opacity: 1; }
.casestudiesSection .image-nav-left { left: 10px; }
.casestudiesSection .image-nav-right { right: 10px; }
.casestudiesSection .card-content { flex: 1; padding: 20px; background-color: #F4EEE8; border-radius: 0px 0px 25px 25px; }
.casestudiesSection .status-property-row { flex-direction: column; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.casestudiesSection .status-badge { font-family: Montserrat, sans-serif; background: rgb(37 42 80 / 85%); color: #FFFFFF; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.casestudiesSection .property { font-family: Montserrat, sans-serif; margin-top: 5px; font-size: 16px; font-weight: 700; color: #2c3e50;  }
.casestudiesSection .main-arrow { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #2c3e50; color: #FFFFFF; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; z-index: 10; transition: background 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.casestudiesSection .main-arrow:hover { background: #1a252f; }
.casestudiesSection .main-arrow:disabled { background: #aaa; cursor: default; }
.casestudiesSection button.carousel-btn { align-items: center; background: #252a50; border: none; border-radius: 10px; box-shadow: 0 3px 14px rgba(30, 42, 94, .35); cursor: pointer; display: flex; height: 50px; justify-content: center; line-height: 0; margin-left: 2px; margin-right: 20px; padding: 6px 23px; transition: all .3s ease; width: 25px; }
.casestudiesSection button.carousel-btn i { color: #FFFFFF; font-size: 1rem; }
.casestudiesSection button.carousel-btn#cprevBtn { background: #FFFFFF; }
.casestudiesSection button.carousel-btn#cprevBtn i { color: #252a50; }

@media screen and (max-width: 991px) {
  .casestudiesSection .property-card { flex: 0 0 calc(50% - 16px); min-width: calc(50% - 16px); }
}

@media screen and (max-width: 767px) {
  .casestudiesSection h2 { font-size: 25px; margin-bottom: 15px; }
  .casestudiesSection .property-card { flex: 0 0 100%; min-width: 100%; }
  .casestudiesSection button.carousel-btn { height: 35px; margin-left: 0px; margin-right: 0; padding: 6px 20px; width: 25px;  }
}

@media screen and (max-width: 640px) {
  .casestudiesSection .image-container { height: auto; }
}