/*
Theme Name: The Coral
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1785999765
Updated: 2026-08-06 07:02:45

*/

/* Lang */
.lang-switch {
  display: flex;
  border: 1px solid var(--e-global-color-accent);
  border-radius: 50px;
  overflow: hidden;
  background: var(--e-global-color-0283a62);
}

.lang-opt {
  padding: 6px 13px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--e-global-color-e67c0de);
  transition: all .2s;
}

.lang-opt.active {
  background: var(--e-global-color-primary);
  color: var(--e-global-color-0283a62);
}

/* Gallery */
.thecoral-gallery{
    position: relative;
}


/* =====================================================
   CAROUSEL WRAPPER
   300px image + 62px navigation area
===================================================== */

.thecoral-gallery .elementor-image-carousel-wrapper{
    position: relative !important;

    height: 362px !important;

    padding-bottom: 62px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* =====================================================
   IMAGE HEIGHT
===================================================== */

.thecoral-gallery .swiper-wrapper{
    height: 300px !important;
}

.thecoral-gallery .swiper-slide{
    height: 300px !important;
    overflow: hidden !important;
}

.thecoral-gallery .swiper-slide > a{
    display: block !important;

    width: 100% !important;
    height: 100% !important;
}

.thecoral-gallery .swiper-slide-inner{
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    overflow: hidden !important;
}

.thecoral-gallery .swiper-slide-image{
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;
    object-position: center !important;
}


/* =====================================================
   WHITE CAPSULE
   IMPORTANT:
   capsule อยู่กับ wrapper เดียวกับ arrows + dots
===================================================== */

.thecoral-gallery .elementor-image-carousel-wrapper::after{
    content: "";

    position: absolute;

    left: 50%;
    bottom: 8px;

    transform: translateX(-50%);

    width: 138px;
    height: 44px;

    background: #ffffff;

    border-radius: 999px;

    box-shadow: 0 5px 14px rgba(0,0,0,.06);

    z-index: 5;

    pointer-events: none;
}


/* =====================================================
   PAGINATION
===================================================== */

.thecoral-gallery .swiper-pagination{
    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    bottom: 8px !important;

    transform: translateX(-50%) !important;

    width: auto !important;
    height: 44px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    background: transparent !important;

    z-index: 10 !important;
}


/* normal dots */

.thecoral-gallery .swiper-pagination-bullet{
    flex: 0 0 auto !important;

    width: 5px !important;
    height: 5px !important;

    margin: 0 !important;

    background: #d7be98 !important;

    opacity: 1 !important;

    border-radius: 50% !important;
}


/* active dot */

.thecoral-gallery .swiper-pagination-bullet-active{
    width: 19px !important;
    height: 5px !important;

    background: #55483a !important;

    border-radius: 999px !important;
}


/* =====================================================
   ARROWS
===================================================== */

.thecoral-gallery .elementor-swiper-button{
    position: absolute !important;

    top: auto !important;
    bottom: 17px !important;

    width: 26px !important;
    height: 26px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: #ffffff !important;

    border: 1px solid #d4a35f !important;

    border-radius: 50% !important;

    color: #ad7734 !important;

    transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 20 !important;
}


/* LEFT */

.thecoral-gallery .elementor-swiper-button-prev{
    left: calc(50% - 57px) !important;
    right: auto !important;
}


/* RIGHT */

.thecoral-gallery .elementor-swiper-button-next{
    right: calc(50% - 57px) !important;
    left: auto !important;
}


/* icon */

.thecoral-gallery .elementor-swiper-button svg{
    display: block !important;

    width: 8px !important;
    height: 8px !important;

    fill: currentColor !important;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px){

    .thecoral-gallery .elementor-image-carousel-wrapper{
        height: 342px !important;
    }

    .thecoral-gallery .swiper-wrapper,
    .thecoral-gallery .swiper-slide{
        height: 280px !important;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px){

    .thecoral-gallery .elementor-image-carousel-wrapper{
        height: 392px !important;
        padding-bottom: 62px !important;
    }

    .thecoral-gallery .swiper-wrapper,
    .thecoral-gallery .swiper-slide{
        height: 330px !important;
    }

}

/* ข้อมูลโครงการ */
/* #ct-tab {
	border: none;
	background: transparent;
	cursor: pointer;
	font-family: 'Prompt',sans-serif;
	font-size: 17px;
	font-weight: 500;
	color: var(--dark);
	padding: 14px 34px;
	border-radius: 60px;
	white-space: nowrap;
	transition: background .2s,color .2s;
} */
/* .e-n-tabs-heading {
    padding: 8px !important;
    background-color: var(--e-global-color-0283a62) !important;
    width: fit-content !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 30px rgba(45, 40, 32, .10) !important;
} */

/* .elementor-widget-n-tabs .e-n-tabs {
	align-items: center !important;
} */