/* fonts family */

:root {
    --body-font : "roboto", sans-serif;
    --bs-btn-font-family : "roboto", sans-serif;
}

@font-face {
    font-family: 'orangesquash';
    src: url('../font/orangesquash.otf') format('otf');
    font-weight: bold;
    font-style: normal;
}

/* fonts color */

:root {
    --bs-blue: #4BA1A7;
    --bs-red: #F0756C;
    --bs-orange: #F5E9E9;
    --bs-yellow: #EFEAEA;
    --bs-green: #F5F8F1;
    --bs-teal: #EFE8EF;
    --bs-cyan: #F3F3F3;
    --bs-black: #111111; 
    --bs-white: #FFFFFF;
    --bs-gray: #777777; 
    
    --bs-link-color: #111111;
    --bs-link-color-rgb: 17, 17, 17;
    --bs-link-hover-color: #F0756C;
    --bs-link-hover-color-rgb: 240, 117, 108;
    
    --bs-primary: #F0756C;
    --bs-primary-rgb: 240, 117, 108;
    --bs-body-color: #111111;   
    --bs-info: #C3C3C3; 
    --bs-light-text-emphasis: #c3c3c3;
    
    --swiper-pagination-color: #F0756C;
}

body , body  [data-bs-theme=light] {
    --bs-blue: #4BA1A7;
    --bs-red: #F0756C;
    --bs-orange: #F5E9E9;
    --bs-yellow: #EFEAEA;
    --bs-green: #F5F8F1;
    --bs-teal: #EFE8EF;
    --bs-cyan: #F3F3F3;
    --bs-black: #111111; 
    --bs-white: #FFFFFF;
    --bs-gray: #777777;   
    --bs-info: #C3C3C3;
}

.btn-primary {
    --bs-btn-color: var(--bs-black);
    --bs-btn-bg: var(--bs-orange);
    --bs-btn-border-color: var(--bs-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-black);
    --bs-btn-hover-border-color: var(--bs-black);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-bg: var(--bs-black); 
}

.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: var(--bs-black);
    --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: var(--bs-black);
    --bs-pagination-active-bg: #F5E9E9;
    --bs-pagination-active-border-color: #F5E9E9;
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-secondary-bg);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    display: flex;
    padding-left: 0;
    list-style: none;
}

.bg-gray {
    background-color: var(--bs-gray) !important;
}

.bg-yellow {
    background-color: var(--bs-yellow) !important;
}

.bg-green {
    background-color: var(--bs-green) !important;
}

.bg-teal {
    background-color: var(--bs-teal) !important;
}

.navbar-nav a.nav-link:hover {
    color: var(--bs-primary) !important;
}

body {
    font-family: var(--body-font);
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-color: #EBE7CA;
    margin: 0; /* Ensure no margin around the body */
    padding: 0; /* Ensure no padding around the body */
}

/* font size */
h2,h3,h4,h5,h6 {
    font-weight: 700;
}
.display-1 {
    font-size: calc(4.375rem + 4.5vw);
    font-weight: 900 ;
    font-family: var(--body-font); 
    line-height: 80%;
}
.display-2,
.display-3,
.display-4,
.display-5 {
    font-weight: 700 ;
}
.p-6 {
    padding: 4rem !important;
}

/* navbar */
.navbar svg {
    color: #111111;
}

/* .navbar .navbar-brand img {
    width: 10%;
} */

/* banner color */

.banner {
    position: relative;
    color: var(--bs-black);
    background-image: url(../images/bgbanner.JPG); 
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: top center;
    top: 0;
    height: 270vh;
    width: 100%;
    
}

.banner .text-side {
    text-align: right;
    margin-right: 200px;
    margin-top: 200px;
}
/* 
.banner .postf {
    padding: 0px 200px;
} */

.banner .logodancing {
    position: relative;
    z-index: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: -100px;
    }

/* line height */

@media (max-width: 768px) {
    .banner .logodancing {
        position: relative;
        z-index: 1;
        justify-content: center;
        align-items: center;
        display: flex;
        margin-top: 0px;
        }
}

p.a {
    line-height: 10%;
}

.lh-small {
    line-height: 80%;
}

.ls-4 {
    letter-spacing: 0.2rem;
}

/* masonry */
.btn.is-checked {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
/* paragraph color */
.postf {
    color: var(--bs-gray);
}

.postg {
    color: var(--bs-info);
}

/* width of container */

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1460px;
    }
}

/* testimonial */

.testimonial-card {
  background: var(--bs-black);
  color: var(--bs-white);
}

.testimonial-card .postd {
    color: var(--bs-red);
}



/* 3.5 FAQs
/*----------------------------------------------*/
.accordion-item{
    background: var(--bs-yellow);
  }
  h5 button.accordion-button{
    font-family: var(--body-font);
    background: var(--bs-yellow);
  }
  .accordion-button:focus {
    border: none;
    outline: 0;
    box-shadow: none;
  }
  .accordion-button:not(.collapsed) {
    background: none;
    box-shadow: none;
  }

  .accordion-button::after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z'/%3E%3C/svg%3E");
  }
  .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z'/%3E%3C/svg%3E");
    transform: rotate(180deg);
  }


/* styles page */
/* 
a {
    color: rgba(var(--bs-black), var(--bs-link-opacity, 1));
    text-decoration: none;
}

a:hover {
    --bs-black: var(--bs-link-hover-color-rgb);
} */

/* blog */

.page-link {
    color: var(--bs-black);
}

.page-link:hover {
    z-index: 2;
    color: var(--bs-pagination-hover-color);
    background-color: var(--bs-pagination-hover-bg);
    border-color: var(--bs-pagination-hover-border-color);
}

.active>.page-link, .page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
}

#footer .info-box img {
    min-height: 250px;
    width: 100%;    
}




/* =================================================================== 
 * # PRELOADER 
 * 
 * 
 * -------------------------------------------------------------------
 * - markup:
 *
 * <div id="preloader">
 *    <div id="loader"></div>
 * </div>
 *
 * ------------------------------------------------------------------- */
 #preloader {
    position: fixed; /* Fixed to the viewport */
    top: 0;
    left: 0;
    width: 100%; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
    background: #E3DABB; /* Background color */
    z-index: 999; /* Ensure it appears above all other content */
    display: flex; /* Flex container for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

#loader img {
    width: 100%; /* Menjadikan gambar 70% dari lebar layar */
    max-width: 400px; /* Opsional: Batasi ukuran maksimum agar tidak terlalu besar di layar besar */
    height: auto; /* Menjaga rasio aspek */
}

.no-js #preloader {
    display: none; /* Hide preloader if JavaScript is disabled */
}


/* When preloader is hidden */
.ss-loaded #preloader {
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s 0.9s ease-in-out;
}


/* Parent container styles */
.banner .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push content to the bottom */
    height: 120vh; /* Full viewport height */
  }
  
  /* Styling for the link-landing */
  .link-landing ul {
    display: flex;
    justify-content: center; /* Center the items */
    padding: 0;
    margin: 0;
    gap: 100px;
    list-style-type: none; /* Remove bullets */
    position: relative; /* Make each <li> positioned */
    z-index: 99; /* Default z-index */
  }
  
  .link-landing ul li {
    margin-right: 20px; /* Add space between items */
    font-size: 24px;
  }

  .link-landing ul li a {
    text-decoration: none; /* Remove underline */
    color: #EBE7CA; /* Set the link color */
  }
  
  /* Add hover effect for <li> elements */
  .link-landing ul li a:hover {
    font-style: italic;
  }
  
  .link-landing ul li:last-child {
    margin-right: 0; /* Remove margin for the last item */
  }


  /* About Page */
  .about {
    display: flex;
    height: 100vh; /* Full viewport height for the sections */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.about .left-section {
    flex: 0.8; /* Left section takes 2 parts of the total */
    position: relative; /* Position relative for absolute positioning of slides */
    overflow: hidden; /* Hide overflowing slides */
    margin: 0; /* Remove left space */
    padding: 0; /* Ensure no padding */
    
}

.about .slideshow-container {
    position: relative;
    max-width: 100%; /* Ensure it fits the container */
    margin: auto;
}

 .about .mySlides {
    display: none; /* Hide all slides by default */
    margin: 0;
}

 .about .swiper-slide img {
    width: 110%;         /* Full width of the slide */
    height: 100vh;      /* Set a fixed height */
    object-fit: cover;  /* Maintain aspect ratio and cover the space */
}

 .about.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

 .about.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Dark background on hover */
}

.about .fade {
    animation: fade 1.5s ease; /* Animation for sliding effect */
}

@keyframes fade {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Right section styles can remain the same */
.about .right-section {
    flex: 1; /* Right section takes 1 part of the total */
    background-color: #F5F3D7; /* Light beige background */
    padding: 65px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.about .logo-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -50px;
    margin-bottom: 120px;
}

.shop .logo-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -50px;
    margin-bottom: 50px;
}

.work .logo-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.logo {
    height: 50px; /* Adjust as needed */
}

.nav {
    list-style: none;
    display: flex;
    gap: 50px;
}

.nav li a {
    text-decoration: none;
    color: #40503D;
    font-weight: 500;
    font-size: 14px;
}

.nav li a:hover {
    text-decoration: underline;
}

 .about .content h1 {
    font-size: 48px;
    margin-bottom: 20px;
    color: #333;
}

 .about .content p {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

 footer {
    text-align: right;
    margin-top: 200px;
    font-size: 12px;
    color: #999;
}

.work footer {
    margin-top: 150px !important;
}

.about .line {
    width: 50%; /* Adjust the width as needed */
    height: 1px; /* Thickness of the line */
    background-color: #333; /* Color of the line */
    margin-top: 20px; /* Space between the paragraph and the line */
}

.about .content img {
    width: 25%;
    margin-bottom: 50px;
}

.main-title {
    text-align: center;
    margin-top: 50px;
    font-size: 2.5rem;
}

.arrangement-text {
    text-align: center;
    margin: 20px 0;
}

.styling-text {
    text-align: center;
    margin: 50px 0;
    padding: 0px 100px;
}

.product-section {
    padding: 50px 0;
}

.product-card {
    text-align: left; /* Aligns all text within the product-card to the left */
    padding: 20px; /* Optional: Adds some padding around the product card for spacing */
}


.product-card h3 {
    margin-top: 50px;
}


.terms-section {
    background-color: #4f5b49;
    color: #EBE7CA;
    padding: 50px 20px;
    text-align: center;
}

.contact-section {
    padding: 50px 100px;
}

.form-control {
    height: 60px;
    background-color: white;
    border-radius: 0px;
}

.shop .contact-section .custom-height{
    height: 200px;
}


.contact-section .btn {
    width: 100%;
    height: 60px;
    border-radius:0px;
    background-color: #40503D;
    color: white;
}

.contact-section .btn:hover {
    background-color: #242a23;
}

.contact-section form {
    margin-top: 100px;
}

.footer {
    text-align: center;
    padding: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-title {
        font-size: 2rem;
    }
    .contact-section {
        padding: 0px 0px;
    }
}

.shop img.header {
    display: block;
    margin: 0 auto; /* This ensures the image is centered as a block element */
    max-width: 30%; /* Make the image responsive */
    height: auto;    
}

.shop header p {
    padding: 0px 100px;
    font-size: 14px;
    line-height: 1.6;
}

.shop {
    padding-top: 100px;
}

.shop .form-control::placeholder {
    color: gray;
}

.shop .product-section p, .shop .floral-section p, .shop .style-section p, .shop .terms-section p {
    font-size: 14px;
    line-height: 1.6;
}

#service-date::-webkit-datetime-edit {
    color: gray; /* Change to your preferred color */
}
/* For Firefox */
#service-date::placeholder {
    color: gray; /* Change to your preferred color */
}

/* Setelah input dimasukkan, warna teks berubah menjadi hitam */
#service-date {
    color: #111; /* Text color after input */
}

/* Opsional: ubah warna teks saat input dalam fokus */
#service-date:focus {
    color: #111; /* Color when input is focused */
}

#service:invalid {
    color: gray; /* Change placeholder text color */
}

/* Ensure selected options have a different color */
#service option {
    color: black; /* Change selected text color */
}

.shop textarea {
    height: 250px;
}

.shop input, .shop select{
    height: 50px;
    border-radius: 3px;
}

.signature-thumbs-swiper {
    margin-top: 20px; /* Space between the main image swiper and the thumbnails */
    padding-bottom: 20px; /* Add some padding to the bottom */
    
}

.signature-thumbs-swiper .swiper-slide {
    opacity: 0.6; /* Make thumbnails slightly transparent */
}
.signature-thumbs-swiper .swiper-slide img{
    height: 15% !important;
}

.signature-thumbs-swiper .swiper-slide-thumb-active {
    opacity: 1; /* Highlight the active thumbnail */
    border: 2px solid #fff; /* Add a border to the active thumbnail */
}

.contact-section img {
    width: 100%;
    height: 700px; /* Set your desired fixed height */
    object-fit: cover; /* Ensures the image fills the area while keeping aspect ratio */
}

.signature-next, .signature-prev, .local-next, .local-prev, .subs-prev, .subs-next, .style-next, .style-prev{
    color: #fff;    
}

/* WORK PAGE CONTENT */

.work {
    overflow-y: hidden;
    height: 100vh;
}

.work footer {
    margin-top: 180px;
}



/* Main content */
.main-content {
    text-align: left;
    margin-top: 150px;
    margin-bottom: 80px;
    margin-left: 100px;
}

.main-content ul {
    list-style-type: none; /* Remove bullets */
    position: relative; /* Parent element needs to be relative */
    padding: 0;
    margin: 0;
    width: 100%;
    height: 300px; /* Adjust height as needed */
}

.main-content li {
    position: absolute;
    left: 0; /* Start from the left */
    transform: translateX(calc(var(--i) * 28px)) translateY(calc(var(--i) * 30px));
    /* Adjust 20px and 30px to change diagonal spacing */
}

.main-content li:nth-child(1) {
    --i: 1;
}

.main-content li:nth-child(2) {
    --i: 2;
}

.main-content li:nth-child(3) {
    --i: 3;
}

.main-content li:nth-child(4) {
    --i: 4;
}

.main-content li:nth-child(5) {
    --i: 5;
}

.main-content li:nth-child(6) {
    --i: 6;
}


.main-content a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 24px;
}


.main-content a:hover {
    color: #111111;
    font-style: italic;
}

/* Decorative Images */
.flower-img {
    position: absolute;
    z-index: -1; /* Moves the images behind the main content */
    
}

.flower-left {
    top: 200px; /* Adjust the vertical position */
    left: -400px; /* Adjust the horizontal position */
    width: 800px;
}

.flower-right {
    top: 50px; /* Adjust the vertical position */
    right: 0px; /* Adjust the horizontal position */
    width: 800px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    max-width: 98vw; /* Restrict max width to viewport width */
    max-height: 98vh; /* Restrict max height to viewport height */
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    padding: 0;
    overflow: hidden;
}

.modal-content {
    position: relative; /* Position relative to modal */
    display: flex; /* Flexbox for centering the image */
    background: #11111100 !important;
    align-items: center; /* Center the image vertically */
    justify-content: center; /* Center the image horizontally */
    width: 100%; /* Full width of modal */
    border: none;
    height: 100%; /* Full height of modal */
}

.modal-content img {
    max-width: 100%; /* Prevents image from exceeding modal width */
    max-height: 98vh; /* Prevents image from exceeding viewport height */
    width: auto; /* Maintain aspect ratio */
    height: auto;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 30px;
    font-weight: medium;
    cursor: pointer;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0px;
    user-select: none;
}

.next {
    right: 0;
}
.prev {
    left: 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}




.floral-section .device-frame {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    background: url('images/device-frame.png') no-repeat center center;
    background-size: contain;
    aspect-ratio: 9/12;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
  }
  
.floral-section .swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
.floral-section .swiper-wrapper {
    width: 100%;
    height: 100%;
  }
  
.floral-section .swiper-slide {
    width: 100%;
    height: 100%;
  }
  
.floral-section .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container */
    display: block;
  }

.floral-section img.header {
    width: 100%;       /* Adjust to fit the container */
    max-width: 500px;  /* Set a consistent max width */
    height: auto;      /* Maintain aspect ratio */
    display: block;
    float: left;
    margin: 0 auto;    /* Center the image */
  }  
.floral-section .right-side{
    padding-right: 100px;
}

.style-section .left-side{
    padding-left: 100px;
}
.style-section img.header {
    width: 80%;       /* Adjust to fit the container */
    max-width: 400px;  /* Set a consistent max width */
    height: auto;      /* Maintain aspect ratio */
    display: block;
    float: left;
    margin: 0 auto;    /* Center the image */
    margin-bottom: 100px;
  }  

  .style-section .device-frame {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    background: url('images/device-frame.png') no-repeat center center;
    background-size: contain;
    aspect-ratio: 9/12;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
  }
  
.style-section .swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
.style-section .swiper-wrapper {
    width: 100%;
    height: 100%;
  }
  
.style-section .swiper-slide {
    width: 100%;
    height: 100%;
  }
  
.style-section .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container */
    display: block;
  }

  .product-frame {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: url('images/device-frame.png') no-repeat center center;
    background-size: contain;
    aspect-ratio: 3/4;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .product-frame .swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
.product-frame .swiper-wrapper {
    width: 100%;
    height: 100%;
  }
  
.product-frame .swiper-slide {
    width: 100%;
    height: 100%;
  }
  
.product-frame .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container */
    display: block;
  }