:root {
    --bs-primary: #D8A961;
    --bs-primary-rgb: 216, 169, 97;
    --bs-accordion-border-color: rgba(216, 169, 97, 0.45) !important;
}
body {font-family: "Assistant", sans-serif; background-color: #fff; }
a {text-decoration: none}
img {max-width: 100%}
p {font-size: 20px}
/**** BOOTSRAP ****/
.bg-dark {background-color: #1B1B1C !important}
.btn-primary {
    background-color: #D8A961 !important;
    border-color: #D8A961 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #b68c4f !important;
    border-color: #b68c4f !important;
}
/* Remove Bootstrap default blue focus glow */
.accordion-button:focus {
    border-color: transparent;
    box-shadow: 0 0 0 0.25rem rgba(216, 169, 97, 0.35) !important; /* gold glow */
}
.accordion-button {border-bottom: 2px solid var(--bs-primary) !important}
/* When expanded (not collapsed) */
.accordion-button:not(.collapsed) {
    color: #000;
    background: transparent;
    box-shadow: none !important; /* remove BS shadow */
    border: none !important;
}

/* Optional: stronger glow on active click */
.accordion-button:active {
    box-shadow: 0 0 0 0.35rem rgba(216, 169, 97, 0.45);
}
/*** helpers ***/
.mt-80 {margin-top: 80px}
.pt-100 {padding-top: 100px;}
.py-80 {padding-top: 80px; padding-bottom: 80px}
.fs-64 {font-size: 64px;}
.fs-24 {font-size: 24px;}
.fs-16 {font-size: 16px}
h2 {font-size: 44px;}
h1 {font-size: 112px}
/*****************/

header {
    background-image:
        linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5)),
        url('../images/main-hero.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
}
.welcome-icon-decoration {position: absolute; right: -50px; bottom: -50px; z-index: -1}
.tag {padding: 2px 5px; border: 1px solid #fff; border-radius: 2px;}

/* Section where left side bleeds full-width, right side aligns to container */
.section-bleed-left {
    padding-left: 0;  padding-right: calc((100vw - 1320px) / 2); overflow-x: hidden;
}

/* Slick / slider styles (same as before) */
.parquets img, .ceramic-slider img, .sanitary-ware img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

.parquets .slick-slide, .ceramic-slider .slick-slide, .sanitary-ware .slick-slide {
    padding-inline-start: 10px;
    padding-inline-end: 10px;
}

/* TEXT should be aligned to container width on the LEFT (RTL end side) */
.section-bleed-right {
    padding-right: 0;  /* allow bleed on the RIGHT (RTL end) */
    padding-left: calc((100vw - 1320px) / 2);  /* mimic .container left padding */
    overflow-x: hidden; /* prevent scroll */
}

/* Make sure the wrapper is positioned relative */
.ceramic-slider-wrapper, .sanitary-slider-wrapper {
    position: relative;
    overflow: hidden;
}

/* Base arrow styles */
.slick-custom-arrow {
    position: absolute;
    top: -60px; /* Adjust this to move arrows higher or lower */
    width: 40px !important;
    height: 40px !important;
    padding: 0;
    border: none;
    background: transparent;
    z-index: 10;
    cursor: pointer;
}

/* Hide the default font arrow */
.slick-custom-arrow::before {
    display: none;
}

/* Position in the middle horizontally of col-md-7 */
.slick-prev {
    right: 50%;
    transform: translateX(60px); /* Move slightly to the right */
}

.slick-next {
    right: 50%;
    transform: translateX(-60px); /* Move slightly to the left */
}


.slick-custom-arrow img {
    width: 40px !important;
    height: 40px !important;
}
.ceramic-slider-arrows {cursor: pointer}
/* Dot container spacing */

/* Remove default dot styles */
.slick-dots {bottom: -40px !important}
.slick-dots li button:before {
    display: none;
}

/* Base dot appearance (INACTIVE) */
.slick-dots li {
    width: 32px;
    height: 6px !important;
    margin: 0;
    background-color: #41474D;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* ACTIVE dot style */
.slick-dots li.slick-active {
    width: 56px;
    background-color: #ffffff;
}
.why-us-decoration {position: absolute; right: -30px; top: -40px; z-index: -1}
.advantage {padding-right: 5px; border-right: 2px solid #D8A961}
.q-a-decoration {position: absolute; left: -40px; top: -40px; z-index: -1}
.contact-way {border: 1px solid var(--bs-primary); padding: 3px 15px; text-align: center; width: 200px}
.contact-way:last-of-type {background-color: var(--bs-primary); color: #fff;}

/** CONTACT FORM **/
/* Inputs on dark BG */
.contact-input,
.contact-textarea {
    background-color: #ffffff;
    color: #000000;
    border-radius: 8px;
    border: 1px solid #cccccc;
}

/* Improve textarea spacing so button doesn’t overlap text */
.contact-textarea {
    padding-bottom: 70px; /* Space for the button illusion */
}

/* Position the submit button inside the bottom-left of the textarea (RTL aware!) */
.contact-submit-btn {
    position: absolute;
    bottom: 15px;
    left: 20px; /* RTL: left = bottom-left corner */
    z-index: 5;
    border-radius: 8px;
    padding: 10px 22px;
}

/* Remove Bootstrap glow */
.contact-input:focus,
.contact-textarea:focus {
    box-shadow: 0 0 0 0.25rem rgba(216, 169, 97, 0.35);
    border-color: #D8A961;
}
footer {background-color: #000;}

@media only screen and (max-width: 1024px){    
    h2 {font-size: 38px;}
    h1 {font-size: 64px; }
    .fs-64 {font-size: 52px; line-height: 1}
    header {
        background-image:
            linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.7)),
            url('../images/hero-mobile.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;

    }
    .mobile-column-reverse {flex-direction: column-reverse}
    .welcome-icon-decoration {right: 1px}
    .why-us-decoration {right: 5px; top: -60px; z-index: -1}
    .q-a-decoration {left: 10px; bottom: -60px; top: auto}
    .cancel-py-80-mobile {padding-top: 0 !important}
}