@import url(segoe-ui/font-family.css);

:root {
 --bg-bronze-metallic: #B6955A;
 --bg-dark-charcoal: #2E2E2E;
 --bg-french-bistre: #8C7051;
 --bg-white-chocolate: #ECE2D6;
 --bg-seashell: #F9F5EF;
}

.ff-bn {
 font-family: 'Bebas Neue', sans-serif;
}

.ff-nm {
 font-family: 'Nanum Myeongjo', serif;
}

body {
 font-family: 'Segoe UI';
}

.txt-ss {
 color: var(--bg-seashell);
}

.bg-ss {
 background: var(--bg-seashell);
}

.txt-bm {
 color: var(--bg-bronze-metallic);
}

.bg-bm {
 background: var(--bg-bronze-metallic);
}

.txt-fb {
 color: var(--bg-french-bistre);
}

.bg-fb {
 background: var(--bg-french-bistr);
}

.border-fb {
 border-color: var(--bg-french-bistr) !important;
}

.txt-dc {
 color: var(--bg-dark-charcoal);
}

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

.txt-wc {
 color: var(--bg-white-chocolate);
}

.bg-wc {
 background: var(--bg-white-chocolate);
}

.bg-set-action-bar {
 /* background: linear-gradient(90deg, #FFA7C3 0%, #F0316F 100%);*/
 background-image: url('../img/action-bar.webp');
 background-size: cover;
}

.fixed-top {
 border-bottom: 1px solid #9e9e9e;
}

.border-md-start {
 border-left: 1px solid !important;
}

.border-md-end {
 border-right: 1px solid !important;
}

.fw-semibold {
 font-weight: 600 !important;
}

.fts-10 {
 font-size: 10px;
}

.fts-11 {
 font-size: 11px;
}

.fts-12 {
 font-size: 12px;
}

.fts-13 {
 font-size: 13px;
}

.fts-14 {
 font-size: 14px;
}

.fts-15 {
 font-size: 15px;
}

.fts-16 {
 font-size: 16px;
}

.fts-17 {
 font-size: 17px;
}

.fts-18 {
 font-size: 18px;
}

.fts-19 {
 font-size: 19px;
}

.fts-20 {
 font-size: 20px;
}

.sticky-top {
 margin: 0;
 padding: 0;
 background-color: #fff;
 content: "";
}

input#search::placeholder {
 color: white;
}

.navbar-light .navbar-toggler {
 color: rgb(255 255 255) !important;
 border-color: rgb(255 255 255) !important;
}

.dropdown-menu {
 background-color: #f8f9fa;
 border: none;
}

.dropdown-menu a:hover {
 background-color: #e9ecef;
}

.dropdown-divider {
 margin: 0.5rem 0;
 border-color: #dee2e6;
}

.dropdown-content {
 display: none;
 position: relative;
 left: 0px;
 top: 100%;
 background-color: var(--bg-french-bistre);
 min-width: 100%;
 overflow: auto;
 border: 1px solid #000;
 z-index: 1;
 padding-left: 8px;
 color: white;
}

.dropdown-content::placeholder {
 color: #fff;
}

.lst-1 {
 letter-spacing: 7px;
}

.lst-2 {
 letter-spacing: 5px;
}

.lst-3 {
 letter-spacing: 3px;
}

.lst-4 {
 letter-spacing: 1px;
}

.lst-5 {
 letter-spacing: 0.8px;
}


.show {
 display: block !important;
}

.center-l {
 display: flex;
 justify-content: center;
 align-items: center;
}

.center-over {
 position: absolute;
 top: 50%;
 left: 50%;
 translate: -50% -50%;
}

::-webkit-input-placeholder {
 font-family: "Outfit";
 padding-left: 2px;
}

.back-to-top {
 position: fixed;
 bottom: 20px;
 right: 20px;
 background: var(--bg-white-chocolate);
 padding: 5px;
 z-index: 9999;
}

.set-footer-button {
 position: fixed;
 bottom: 0%;
 z-index: 999;
 background: #fff;
 width: 100%;
 display: flex;
 justify-content: space-around;
 transition: 0.1s ease-out all;
}

.ft-link a,
.ft-link,
.ft-link p {
 color: #676767;
}

.ft-link a:hover {
 color: var(--bg-oy);
}

.floral-icon img {
 width: 70% !important;
}

.floral-icon-r img {
 width: 70%;
 position: relative;
 right: -49px;
}

.carousel-indicators [data-bs-target] {
 border-radius: 50%;
 width: 15px;
 height: 15px;
}

.carousel-caption {
 position: absolute;
 top: 8% !important;
 right: 0 !important;
 bottom: 0;
 left: 5% !important;
 padding-top: 0 !important;
 padding-bottom: 0 !important;
 color: #fff;
 text-align: left;
}

.shw {
 position: absolute;
 width: 100%;
 height: 100%;
 box-shadow: inset gray 0 50px 15px 0, inset gray 0px -50px 15px 0;
 padding-right: 30px;
 margin-left: -15px;
}

.owl-testimonial .owl-dots {
 display: flex;
 justify-content: center;
 margin-top: 0;
}

.owl-testimonial .owl-dot {
 background-color: var(--bg-gary);
 border-radius: 50%;
 display: inline-block;
 height: 10px !important;
 margin: 5px 5px;
 width: 10px;
}

.owl-testimonial .owl-dot.active {
 background: var(--bg-d-ga) !important;
 width: 1%;
}

.carousel-indicators {
 margin-right: 15%;
 margin-left: 15%;
 list-style: none;
}

.carousel-indicators [data-bs-target] {
 background-color: var(--bg-carnation-pink);
 width: 10px;
 height: 10px;
}

.carousel-indicators li:active {
 opacity: 1;
 background: var(--bg-razzmatazz);
}

input[type='radio'] {
 accent-color: black;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 margin: 0;
}

/* Firefox */
input[type=number] {
 -moz-appearance: textfield;
}

.slick-prev {
 left: 0;
 z-index: 999;
}

.slick-next {
 right: 0px;
}

ul.slick-dots li {
 padding: 0px 20px;
}

.slick-dots li button:before {
 font-size: 10px;
 line-height: 28px;
}


.industries {
 position: relative;
 display: inline-block;
}

.industries:hover .overlay-title {
 opacity: 1;
}

.overlay-title {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 color: white;
 text-align: center;
 opacity: 0;
 transition: opacity 0.3s ease-in-out;
 display: flex;
 justify-content: center;
 align-items: center;
}

.overlay-title:before {
 content: '';
 position: absolute;
 border: 1px solid #FFD281;
 width: 95%;
 height: 95%;
}

.fabric-logo {
 width: auto;
 height: 101px;
 display: flex !important;
 justify-content: center !important;
 align-items: center !important;
}


/* Flaired edges */
.line-set {
 position: relative;
 width: inherit;
}

hr.style-three {
 height: 2px;
 border-style: solid;
 border-color: var(--bg-bronze-metallic) !important;
 background: var(--bg-bronze-metallic) !important;
 opacity: 1;
 margin-top: 0px;
}

hr.style-three:before {
 left: 0;
}

hr.style-three:before,
hr.style-three:after {
 display: block;
 content: "\f04d";
 font-family: 'Font Awesome 5 Free';
 width: 8px;
 height: 8px;
 position: absolute;
 background: var(--bg-bronze-metallic);
 z-index: 999;
 transform: rotate(45deg);
 top: -3px;
}

hr.style-three:before,
hr.style-three:after {
 right: 0;
}



/* The actual timeline (the vertical ruler) */
.timeline {
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
 content: '';
 position: absolute;
 width: 3px;
 background-color: var(--bg-bronze-metallic);
 top: 0;
 bottom: 0;
 left: 50%;
 margin-left: -3px;
}

/* Container around content */
.contanier-timeline {
 padding: 10px 40px;
 position: relative;
 background-color: inherit;
 width: 50%;
 padding-top: 0px;
}

/* The circles on the timeline */
.contanier-timeline::after {
 content: '';
 position: absolute;
 width: 12px;
 height: 12px;
 right: -5px;
 background-color: var(--bg-bronze-metallic);
 border: 4px solid var(--bg-bronze-metallic);
 top: 0px;
 border-radius: 50%;
 z-index: 1;
}

/* Place the container to the left */
.left {
 left: 0;
}

/* Place the container to the right */
.right {
 left: 50%;
}

/* Add arrows to the left container (pointing right) */
/*
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid var(--bg-bronze-metallic);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--bg-bronze-metallic);
}
*/

/* Add arrows to the right container (pointing left) */
/*
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid var(--bg-bronze-metallic);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--bg-bronze-metallic) transparent transparent;
}
*/

/* Fix the circle for containers on the right side */
.right::after {
 left: -7px;
}

/* The actual content */
.content {
 /*  padding: 20px 30px;*/
 background-color: white;
 position: relative;
 border-radius: 6px;
}

.d-grid-set-2 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
}

.accordion-button:not(.collapsed) {
 color: black;
 background-color: var(--bg-white-chocolate);
}

.accordion-button:focus,
.accordion-button:focus {
 border-color: var(--bg-white-chocolate) !important;
 box-shadow: 0 0 0 0.25rem rgb(203 203 203 / 40%);
}
}