@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
body {
    background: #120C0E !important;
    height: 100vh;
    font-family: "Cardo", serif;   
}





p{
    color: #d0d0d0;
   strong{
         color: #fff;
   }
}
.modal-content{
   background: #000 !important;
}
:root{
    --theme : #eed566;
    --theme-dark : #a7863f;
    --bg-dark : #a7863f;
    --bs-modal-header-border-color: #f9f9f9;
     --bs-primary-rgb: 238, 213, 102;
}





/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #333;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--theme);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--theme-dark);
}





.breadcrumb{
    --bs-breadcrumb-divider-color: #fff;
}

.form-submiter .heading:after{
   margin: 5px 0;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1;
}

.bg-theme-dark {
   background: var(--theme);
}

.fs-7 {
    font-size: .90rem !important;
}
.fs-8 {
    font-size: .80rem !important;
}
.fs-9 {
    font-size: .70rem !important;
}
.fs-10 {
    font-size: .60rem !important;
}
.w-fit{
    width: fit-content !important;
}
.w-min{
    width: min-content !important;
}
.w-max{
    width: max-content !important;
}
.h-fit{
    height: fit-content !important;
}
.h-min{
    height: min-content !important;
}
.h-max{
    height: max-content !important;
}

.btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--theme);
    --bs-btn-border-color: var(--theme);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--theme-dark);
    --bs-btn-hover-border-color: var(--theme-dark);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--theme-dark);
    --bs-btn-active-border-color: var(--theme-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--theme);
    --bs-btn-disabled-border-color: var(--theme);
}
.text-primary{
    color: var(--theme) !important;
}
.heading {
    color: #EED566;
    font-family: 'Cormorant Garamond', serif;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}
.heading.dark{color: black;}
.heading:after {
    content: "";
    width: 50%;
    height: 1px;
    background: var(--theme);
    display: block;
    margin: 20px auto 5px;
}
.heading.dark:after{background: black;}
.image-container {
   display: flex;
   justify-content: center; /* Centers horizontally */
   align-items: center; /* Centers vertically */
   height: 100vh; /* Full height of viewport */
}



.read-more{
      cursor: pointer;
      text-decoration: none !important;
      margin-top: 10px;
}
.read-more:hover{
    color: #fff !important;
    text-shadow: 2px 2px 5px #2e2e2e;
}
.read-more-text{
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;  
   overflow: hidden;
   color: #d0d0d0;
}
.read-more-text strong{
      color: #fff;
}
.read-more-text.show{
    -webkit-line-clamp: unset;
}



/* Default - Desktop Image 1200x600 */
.responsive-image {
   content: url("../assets/images/codename-joypin-kharadi-slider.png");
   width: 100%;
   height: auto;
   border-radius: 10px;
   display: flex;
   justify-content: center; /* Centers horizontally */
   align-items: center; /* Centers vertically */
   height: 100vh; /* Full height of viewport */
}

/* Laptop Image  1024x600*/
@media (max-width: 1200px) {
   .responsive-image {
       content: url("../assets/images/codename-joypin-kharadi-slider.png");
   }
}

/* Tablet Image 768x500*/
@media (max-width: 992px) {
   .responsive-image {
       content: url("../assets/images/codename-joypin-kharadi-Mobile-slider.png");
   }
}

/* Mobile Image 480x400 */
@media (max-width: 768px) {
   .responsive-image {
       content: url("../assets/images/codename-joypin-kharadi-Mobile-slider.png");
   }
}


.gallerys ,
#floorPlanCarousel{
.slick-prev:before {
   content: '\e5cb';
}
.slick-next:before {
   content: '\e5cc';
}
.slick-prev:before, .slick-next:before {
   font-family: 'Material Symbols Outlined';
   font-size: 40px;
   color: var(--theme);
   width: fit-content;
   display: flex;
   align-items: center;
   justify-content: center;
}
.slick-prev, .slick-next{
   width: 50px;
   height: 50px;
   background: #211d26;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
}
}
#floorPlanCarousel{
   .slick-prev, .slick-next{
      top: unset;
      bottom: -80px;
   }
   .slick-prev{
      left: calc(50% - 60px);
   }
   .slick-next{
      right: calc(50% - 60px);
   }
  
}

.text-truncate-6 {
   max-height: 9em; /* Approx. 6 lines */
   overflow: hidden;
   position: relative;
   display: -webkit-box;
   -webkit-line-clamp: 6;
   -webkit-box-orient: vertical;
}
.bullet-row {
   display: flex;
   justify-content: center;
   gap: 30px; /* Space between bullet points */
   margin-top: 20px;
   flex-wrap: wrap; /* Ensures responsiveness */
}
.bullet-item {
   font-weight: bold;
   text-align: center;
}

.download-btn {
   display: inline-block;
   padding: 10px 25px;
   font-size: 16px;
   font-weight: bold;
   background-color: #eed566;
   color: white;
   border: none;
   border-radius: 50px; /* Makes it oval */
   margin-top: 20px;
   text-decoration: none;
   transition: background 0.3s ease;
}
.download-btn:hover {
   background-color: #eed566;
   color: white;
}
/* Ensure image and text align properly */
.image-container img {
   width: 100%;
   height: auto;
   max-width: 500px;
   display: block;
   margin: 0 auto;
}
@media (max-width: 768px) {
   .text-center-mobile {
       text-align: center;
   }
}

/* Project Specification */
.ps{
   background-color: #F8F0CF;
   /*font-family: 'Cormorant Garamond', serif;*/
    
}

.para {
   font-family: 'Cardo', serif;
   
            font-size: 18px;
           
}


.gallerys {
    .slide {
        padding: 0.7rem !important;
        transition: all 0.5s ease-in-out;
    }
    .slide.slick-active.slick-center {
        transform: scale(1);
        z-index: 3;
        position: relative;
    }
    .slick-prev, .slick-next{
        width: 50px;
        height: 50px;
        z-index: 3;
    }
    .slick-prev:before, .slick-next:before{
        font-size: 45px;
    }
    .slide.slick-active.slick-center + .slide.slick-slide {
        transform: scale(0.7) translateX(-90%);
    }
    .slide.slick-slide{
        transform: scale(0.7) translateX(90%);
    }
    .slide.slick-slide img{ 
        border-radius: 8px;
        overflow: hidden;
    }
}



.feature-list .marker {
   content: ""; /* Empty content */
   display: inline-block;
   width: 24px; /* Adjust size */
   height: 24px;
   background: url('../assets/images/arrow-right.png') center; /* Arrow icon */
   background-repeat: no-repeat;
   background-size: contain;
   margin-right: 10px;
}

@media (max-width: 768px) {
   .spec {
       width: 100%; /* Full width on smaller screens */
       height: auto; /* Maintain aspect ratio */
   }
}

/* Responsive Styling */
@media (max-width: 768px) {
    .fs-sm-6{
        font-size: 1.20rem !important;
    }
    #project{
        font-size: 15px;
    }
    .gallerys {
        .slick-next{
            right: 0px;
        }
        .slick-prev{
            left: 0px;
        }
    }
   .feature-list {
       margin: 0; /* Reduce margin on small screens */
       max-width: 100%;
       padding-left: 0;
   }

   .feature-list li {
       font-size: 16px;
   }
}

.floor-plan {
   border: 1px solid #ddd;
   padding: 15px;
   border-radius: 8px;
   background: #f8f9fa;
   text-align: center;
}

.carousel-item {
   text-align: center;
}
.floor-plan {
   border: 1px solid #ddd;
   padding: 15px;
   border-radius: 8px;
   background: #f8f9fa;
   text-align: center;
   width: 100%;
   height: 100%;
}
.floor-plan img {
   max-width: 100%;
   height: auto;
   border-radius: 5px;
}



.custom-carousel-inner img {
   width: 100%;
   height: 500px;
   object-fit: cover;
   border-radius: 10px;
}
.thumbnail-container {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-top: 15px;
   flex-wrap: wrap;
}
.thumbnail {
   width: 120px;
   height: 80px;
   object-fit: cover;
   cursor: pointer;
   border: 2px solid transparent;
   border-radius: 5px;
   transition: all 0.3s ease;
}
.thumbnail:hover, .thumbnail.active {
   border: 2px solid var(--theme);
   transform: scale(1.1);
}


/* Ensures the image is responsive and well-spaced */
.image-container img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
}

/* Custom styling for the list */
.custom-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.custom-list li {
   font-size: 18px;
   font-weight: 500;
   padding: 12px 0;
   position: relative;
    border-bottom: 1px solid var(--theme);
}
.custom-list li:last-child {
    border-bottom: none;
}
.right-btn{
    color: #000 !important;
}


.cta {
    color: #000;
    width: fit-content;
    background: linear-gradient(-45deg, var(--bg-dark), var(--theme), var(--bg-dark));
    background-size: 400% 400%;
    animation: gradient 2s ease infinite;
    box-shadow: 0 0 24px -8px var(--theme);
}


#contactus{
    background: url('images/bg contact us.png') center no-repeat;
    background-size: cover;
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


@media screen and (max-width: 767px){


/* Flexbox to align image & list with spacing */
.content-wrapper {
   display: flex;
   align-items: center;
   gap: 50px; /* Adds proper space between image & list */
}


/* Full-screen background wrapper */
.form-wrapper {
   background: url('../assets/images/bg contact us.png') no-repeat center;
   background-size: cover;
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Contact Form Styling */
.contact-form {
   background: rgba(0, 0, 0, 0.096); /* Transparent black background */
   padding: 30px;
   border-radius: 15px;
   border: 1px solid var(--theme); /* var(--theme)en border */
   width: 100%;
   max-width: 450px;
}

/* Heading */
.contact-form h2 {
   color: white;
   margin-bottom: 20px;
}

/* Input Fields */
.contact-form .form-control {
   border-radius: 50px;
   padding: 8px 12px;
   font-size: 14px;
   border: 1px solid rgb(255, 253, 239);
   background: transparent;
   color: white;
}

.contact-form .form-control::placeholder {
   color: rgba(255, 255, 255, 0.7);
}

/* Submit Button */
.contact-form .btn-submit {
   background-color: var(--theme);
   color: black;
   font-weight: bold;
   border-radius: 50px;
   padding: 12px;
   width: 100%;
   border: none;
   transition: 0.3s ease-in-out;
}

.contact-form .btn-submit:hover {
   background-color: darkvar(--theme)enrod;
   color: white;
}


.location-image {
   width: 100%;
   max-width: 500px;
   height: auto;
   object-fit: cover;
}

.custom-list {
   list-style: none;
   padding-left: 0;
   text-align: left;
}

.custom-list li {
   font-size: 18px;
   margin-bottom: 10px;
   display: grid;
   grid-template-columns: 35px auto;
   align-items: center;
}

.custom-list li i {
   /*margin-right: 10px;*/
   color: var(--theme); /* var(--theme)-colored icons */
}


/* Footer Styling */
.footer {
   background-color: #222;
   color: white;
}

.footer-logo img {
   max-width: 120px;
   height: auto;
   margin-right: 15px;
}

.footer-text p {
   margin: 0;
   font-size: 14px;
   color: #ddd;
}

@media (max-width: 768px) {
   .footer .row {
       text-align: center;
   }
   .footer-logo {
       justify-content: center;
       margin-bottom: 15px;
   }
}

/* Responsive Adjustments */
@media (max-width: 576px) {
   .contact-form {
       padding: 20px;
       width: 90%;
   }
}

/* Responsive adjustments */
@media (max-width: 992px) {
   .content-wrapper {
       flex-direction: column;
       text-align: center;
   }

   .custom-list {
       text-align: left;
   }
}

/* Responsive styles */


/* Responsive styles */
@media (max-width: 768px) {
    .heading:after{
        width: 50%;
    }
   .list-container {
       align-items: flex-start;
       margin-top: 20px;
   }
   #carouselHeroSection {
       .carousel-inner{
           height: 70vh;
       }
       .carousel-item {
           transition: transform 2s ease-in-out;
           will-change: transform;
           height: 100%;
       }
       .tag-line {
           font-size: clamp(1.5rem, 3.5vw, 4rem) !important;
           top: unset !important;
           bottom: 3% !important;
       }
   }
}