/* Caspia */
#layout-plan .et-pb-arrow-next:before{
	color:#000;
}

#layout-plan .et-pb-arrow-prev:before{
	color:#000;
}

#layout-plan .et_pb_slide_description , #layout-plan .et_pb_slide_title{
	color:#000 !important;
}

#layout-plan .et_pb_slide_description{
	width:30%;
}

#layout-plan .et_pb_slide_image{
	width:70%;
}

@media screen and (min-width:981px){
	.page-id-1581 header{
		padding-bottom:20px;
	}
}

.page-id-11 footer,
.page-id-1082 footer{
	position:relative;
	z-index:0;
}


@media screen and (max-width:980px){
	#caspia-header > .et_pb_row{
		width:100%;
		display:inline-flex;
		align-items:center;
		padding:5px 15px;
		max-height:initial !important;
	}

	#caspia-header .mobile_menu_bar:before{
		color:#0009 !important;
	}
	
	#caspia-header .et_pb_column_1_4{
		height:100%;
		margin-bottom:0 !important;
	}
	
	#caspia-header .et_pb_menu_0_tb_header{
		margin-top:auto !important;
		margin-right:auto !important;
	}
	
	#hero-banner{
		transform:initial !important;
	}
	
	#hero-banner .et_pb_row_0{
		margin-top:auto !important;
		margin-left:auto !important;
	}
	
	#hero-banner .et_pb_text_0{
		margin-top:0 !important;
	}
	
	#hero-banner .et_pb_text_inner h1{
		padding-left:0 !important;
	}
	
	#hero-banner .tagline-big{
		padding-left:0 !important;
	}
	
	#hero-banner .et_pb_column_1{
		padding-left:15px !important;
		padding-right:15px !important;
		float:none !important;
		max-width:380px !important;
		margin-left:auto !important;
		margin-right:auto !important;
	}
	
	#landmark{
		padding-bottom:50px;
	}
	
	#landmark .et_pb_column_12,
	#landmark .et_pb_column_13{
		padding-left:0 !important;
		padding-top:0 !important;
	}
	
	#landmark .et_pb_text_6,
	#landmark .et_pb_text_7,
	#landmark .et_pb_text_8,
	#landmark .et_pb_text_9{
		padding-left:0 !important;
		margin-left: 0 !important;
   	margin-right: auto !important;
	}
	
	#landmark .et_pb_column_12{
		display:flex;
		flex-wrap:wrap;
	}
	
	#landmark .et_pb_column_13{
		display:flex;
		flex-wrap:wrap;
	}
	
	#sales-gallery .et_pb_column_1_2{
		padding-bottom:30px;
	}
	
	#sales-gallery .et_pb_divider_0{
		padding-bottom:38px;
	}
	
	#sales-gallery .et_pb_text_11{
		width:100%;
	}
	
	#caspia-footer .et_pb_column_1_3{
		justify-content:center;
	}
}

@media screen and (max-width:767px){
	#hero-banner .et_pb_row_2{
		top:68%;
	}
	
	#location{
		min-height:280px;
		max-height:280px;
	}
	
}

@media screen and (max-width:480px){
	#location{
		min-height:180px;
		max-height:180px;
	}
}

#caspia-header{
	padding-top:10px;
	padding-bottom:15px !important;
}


    .seo-additional-content {
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .seo-additional-content h1, .seo-additional-content h2, .seo-additional-content h3 {
        color: #000;
        font-family: inherit;
        font-family: 'Libre Baskerville',Georgia,"Times New Roman",serif
    }

    .seo-additional-content h1 {
        font-size: 1.8rem;
    }

    .seo-additional-content h2 {
        font-size: 1.5rem;
    }

    .seo-additional-content h3 {
        font-size: 1.3rem;
    }

    .seo-additional-content a {
        
        color: #7b8fc2;
    }
    
    details summary {
      display:block;
      cursor: pointer;
      color: red;
      width: 100%;
      margin-top: 20px;
    }
    
    /* "Hidden Content" When It Is Open/Visible */
    details[open] {
      display: block;
      padding-bottom: 55px;
      padding-top: 10px;
      animation: openClose 1s ease-in-out;
      position: relative;
    }
    
    /* Close Toggle Button Container */
    details[open] summary {
      position: absolute;
      bottom: 0;
      left: 0;
    }
    
    /* Toggle Container When Clicked/Focus */
    details summary:focus {
      outline: none;
    }
    
    /* Toggle Button Open & Closed */
    details #open, details #close{
      color: #0e6674;
      font-weight: 700;
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    /* Arrow Icon For The Toggle */
    details #open:after, details #close:after {
        content: "";
        background: url('https://api.iconify.design/material-symbols:arrow-right-alt.svg') no-repeat;
        background-size: contain;
        background-position: center center;
        width: 20px;
        height: 20px;
        display: inline-block;
    }

   /* Read More Button Hides When The Content Is Showing */
    details[open] #open {
        display:none;
    }

   /* Close Button Hides When The Content Is Not Showing */
    details #close {
        display:none;
        text-align: left;
    }
   
    /* Wrapper Of The "Close" Button */
    details[open] #close {
        display:flex;
    }
    
      /*  */
    ::-webkit-details-marker {display: none;}
    
    @keyframes openClose {
      0% {
        opacity: 0;
        transform: translateY(-10px);
        transition: all 2s ease-in-out;
      }
      100% {
        opacity: 1;
        transform: translateY(0);
        transition: all 2s ease-in-out;
      }
    }

.et_pb_post_title_0_tb_body .et_pb_title_featured_container {
	    margin-top: 40px !important;
}



/* NEW DESIGN CSS */
#caspia-header nav ul li a {
    display: flex;
    align-items: center;
    padding-bottom: 0;
    color: #000;
	position: relative;
	transition: 0.3s ease all;
}
#caspia-header nav ul li:hover a::before {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 100%;
    height: 2px;
    background: #000;
}
#caspia-header #menu-centrum-caspia-menu li:last-child a{
    background: #f5a800;
    padding: 15px !important;
}

#caspia-hero-slider{
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
}
#caspia-herobanner img {
margin-top: -500px !important;
}
/* ── Outer section becomes the Swiper host ── */
#caspia-hero-slider {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  margin-top: -500px !important;
  height: clamp(320px, 56vw, 800px);
}

/* ── Swiper core overrides ── */
#caspia-hero-slider .swiper {
  width: 100%;
  height: 100%;
}

#caspia-hero-slider .swiper-wrapper {
  width: 100%;
  height: 100%;
}

#caspia-hero-slider .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── Bottom black gradient overlay ── */
#caspia-hero-slider .swiper-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
background: #000000;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.51) 0%, rgba(255, 255, 255, 0) 41%);
  z-index: 1;
}

/* ── Images: cover the slide + top-transparent mask ── */
#caspia-hero-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
}

/* ── Swiper Pagination Dots ── */
#caspia-hero-slider .swiper-pagination {
  bottom: 20px;
}

#caspia-hero-slider .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.8);
  opacity: 1;
  transition: transform 0.3s ease, background 0.3s ease;
}

#caspia-hero-slider .swiper-pagination-bullet-active {
  background: #ffffff;
  transform: scale(1.35);
}
.swiper-button-prev, .swiper-button-next {
    display: none !important;
}



/* ── Move Slick dots to the top ── */
.dcf-carousel-maker.slick-dotted {
  display: flex;
  flex-direction: column;
}

.dcf-carousel-maker .slick-list {
  order: 2;
}

.dcf-carousel-maker .slick-dots {
  order: 1;
  position: static !important; /* override any absolute positioning */
  bottom: auto !important;
  top: auto !important;
  margin-bottom: 24px; /* gap between dots and slides */
	justify-content: center;
}
.dcf-carousel-maker .slick-dots {
  display: flex;
  gap: 12px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

.dcf-carousel-maker .slick-dots li {
  margin: 0;
}

.dcf-carousel-maker .slick-dots li button {
  position: relative;
  font-size: 0 !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  width: 125px !important;
  height: 125px !important;
  background: transparent !important;
  background-image: url('https://staging2026.cameroncentrum.com.my/wp-content/uploads/plan-pagination.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.dcf-carousel-maker .slick-dots li button::before {
  content: 'Type' !important;
  display: block !important;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
}

.dcf-carousel-maker .slick-dots li button::after {
  content: '';
  display: block;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 46px !important;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  line-height: 1;
}

.dcf-carousel-maker .slick-dots li:nth-child(1) button::after { content: 'A'; }
.dcf-carousel-maker .slick-dots li:nth-child(2) button::after { content: 'B'; }
.dcf-carousel-maker .slick-dots li:nth-child(3) button::after { content: 'C'; }

.dcf-carousel-maker .slick-dots li.slick-active button {
  background-image: url('https://staging2026.cameroncentrum.com.my/wp-content/uploads/active-plan-pagination.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 125px !important;
  height: 125px !important;
}

.dcf-carousel-maker .slick-dots li.slick-active button::before {
  color: #ffffff !important;
}

.dcf-carousel-maker .slick-dots li.slick-active button::after {
  color: #ffffff !important;
}