/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

body {
  font-family: "Albert Sans", sans-serif;
  font-style: normal;
  color: #A1AEB7; line-height: 170%; 
    overflow-x: hidden;
}

a {
  color: #4F5356;
  text-decoration: none;
}

a:hover {
  color: #ca3c83;
  text-decoration: none;
}

h1, h2, h3  {
 font-family: "Playfair Display", serif; font-weight: 700;
}
h4, h5, h6 {
    font-family: "Instrument Sans", sans-serif;
    font-weight: 600; font-weight: 600; color: #51616F; 
}
p { font-size: 14pt}

h5 {
    font-weight: 600;
    font-size: 1.15rem;
}


h1.fs-1 {font-size: 3.5rem !important; line-height: 100%}
.link-primary {color: #A1AEB7}
.link-primary:hover {color: #000}

.bot-rounded {border-radius: 1.5rem}
.btn-dark {background: #51616F; border-color: #51616F}
.lt-space-1 {letter-spacing: 1px}
.text-shadow {text-shadow: 1px 1px 5px rgba(0,0,0,0.3) }
.text-grey {color: #51616F}

@media (max-width: 768px) {
  .section-header p {
    font-size: 1.2rem;
  
  }
   
}

.text-primary {color: #ca3c83 !important}
.bg-grey {background-color: #ededed}
 
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.main-header {position: absolute; top: 0; left: 0; width: 100%; z-index: 9}
.navbar-dark .navbar-nav a.nav-link {
  color: #ffffff;
  font-size: 1.1em;
}
.navbar-toggler-icon:before {font-family: "bootstrap-icons"; content: "\F479"; color: #fff; font-size: 40px}
.navbar-toggler:focus {border: none; box-shadow:none}
.dropdown-menu {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border: none;
  border-radius: 0;
  padding: 0.7em;
}
@media only screen and (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: flex;
  }
  .dropdown-menu.show {
    display: flex;
  }
}
.dropdown-menu ul {
  list-style: none;
  padding: 0; 
  margin: 0 20px;
}
.dropdown-menu li .dropdown-item {
  color: gray;
  font-size: 1em;
  padding: 5px 0;
}
.dropdown-menu li .dropdown-item:hover {
  background-color: #f1f1f1;
}
/*.dropdown-menu li:first-child a {
  font-weight: bold;
  font-size: 1.2em;
  text-transform: uppercase;
  color: #000;
}

.dropdown-menu li:first-child a:hover {
  background-color: #f1f1f1;
}
*/
@media only screen and (max-width: 992px) {
  .dropdown-menu.show {
    flex-wrap: wrap;
    max-height: 350px;
    overflow-y: scroll;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1140px) {
  .dropdown:hover .dropdown-menu {
    width: 40vw;
    flex-wrap: wrap;
  }
}

.nav-item {margin: 0 20px}
.nav-link {color: #fff;  padding: 0 !important; text-transform: uppercase}
.nav-link.active { }
.navbar-brand img {max-height: 60px}
.social a {color: #000; font-size: 20px; margin: 0 20px;}
.social .fbook img {top: -3px; position: relative; height: 20px}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero .caption {position: absolute; top: 0; left: 0; z-index: 8; background: rgba(0,0,0,0.4); text-align: center; width: 100%; height: 100%;  padding-top: 20%}
.hero .btn.c2a {position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%)}
/*--------------------------------------------------------------
# sections
--------------------------------------------------------------*/
#main {}
.bg-dark-grey {background-color: #51616F}
.bg-uph-1 {background: url("../img/home/bg-upholstery-ban.jpg"); background-size: cover}

.bg-rect-1 {background: url("../img/home/bg-rect-1.jpg"); background-repeat: no-repeat; background-position: 0px 250px;}
.bg-rect-2 {background: url("../img/home/bg-rect-2.jpg"); background-repeat: no-repeat; background-position: 100px 220px;}
.bg-rect-3 {background: url("../img/home/bg-rect-3.jpg"); background-repeat: no-repeat; background-position: 100% 30px;}

.bg-top-services {background: url("../img/home/bg-services.jpg") no-repeat; background-size: 100% auto}

.mt--100 {margin-top: -100px}
.box-item  {background: #DADADA; text-align: center; border-radius: 2rem; overflow: hidden}
.box-item  .title {color: #51616F; margin: 10px 0; font-weight: 600; height: 80px; padding-top: 10px; line-height: 120%;}
.box-item .picture {position: relative}
.box-item .picture img {border-radius: 1rem}
.box-item i {border-radius: 50%; width: 30px; height: 30px; background: #fff; display: inline-block; position: absolute; top:-10px; left: 47%;
  line-height: 30px; font-size: 20px;}
.bi-chevron-down-circle:before {content: "\F282"; border-radius: 50%; background: #ccc;
  width: 30px;
  height: 30px;
  color: #000;
  font-size: 23px;
  text-align: center;
  line-height: 30px;}

.box-item.b2b  {background: none; overflow: inherit;}
.box-item.b2b .caption  {background: #51616F; position: absolute; top: 0;
  left: 3%;
  width: 94.3%;
  height: 150px;
  z-index: 9;
  border-radius: 2rem;
  box-shadow: 0px 0px 5px;}
.box-item.b2b  .title {color: #fff; font-size: 24px; font-weight: 200; padding: inherit; height: inherit; line-height: inherit; margin: inherit}
.box-item.b2b .picture {margin-top: 100px; height: 250px; overflow: hidden; border-radius: 2rem; }
.box-item.b2b .icon {background: #fff; border-radius: 50%; width: 70px; height: 70px; margin: 0 auto; position: relative; top: -20px; }
.box-item.b2b .icon img {width: 100%}

.bg-studios {background: url("../img/home/bg-studios.jpg") no-repeat; background-size: 100% auto}
.bg-visions {background: url("../img/home/bg-visions.jpg") no-repeat; background-size: 100% auto}
.bg-pat-1 {background: url("../img/products/bg-1.png") no-repeat; background-size: 100% auto;  background-position: 0px 20px;}
.bg-dark-white {background: linear-gradient(180deg,rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 60%);}
hr.white {height: 2px; border: 0; background: #fff}

.lnk-right-circle:after {content: "\F285"; font-family: "Bootstrap-icons"; background: rgba(255,255,255,0.5); color: #534B4B; display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 20px}

.cuc-circle {border-radius:50%; background: #EAEAEA; width: 70px; height: 70px; line-height: 70px; position: relative; top:-30px; margin: 0 auto}

.swiper-button-next, .swiper-button-prev {color: #252525; background: rgba(255,255,255,0.6); border-radius: 50%; width: 50px; height: 50px}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 20px}


@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

footer {padding: 80px 0; color: #fff; background-color: #51616F;}
footer .logo {}
footer h4 {font-size: 1rem}
footer a {padding: 2rem; color: rgba(255,255,255,0.8); text-decoration: none; margin: 0; padding: 0; display: block; font-size: .8rem;}
footer a:hover {color: rgba(255,255,255,1)}

.nav-link:focus, .nav-link:hover {color: #000}

a.bg-dark.text-white:hover {background: #000 !important;}


@media (max-width: 750px) {
    .button.login {max-width: 300px; margin: 2rem auto}
    .navbar-nav {margin: 0;
    margin-bottom: 0px;
    background: #000;
    width: 106%;
    left: -3%;
    position: relative;
    top: 0;
    padding: 0 5%;}
    .nav-item {margin: 5px 0; padding: 10px 0;}
    .navbar a {display: block; text-align: start; font-size: 20px}
    .navbar .social a {margin-right: 20px; margin-left: 0}
    body {overflow-x: hidden}
    h1.fs-1 {font-size: 2rem !important}
     .header .logo img {margin-left: 0}
    .hero .swiper-slide h2 {margin-top: 40px; font-size: 20px}
    .header.header-scrolled .navbar a.soc {margin-right: 0; display: block}
   .header.header-scrolled .navbar a.soc i {font-size: 50px}
    .mobile-nav-toggle.mobile-nav-show.bi.d-sm-none.bi-x {color: #fff}
    
    #showrooms {top: 40%; width: 90%}
    #sroom {max-height: 350px;}
    #formb2b {
  position: relative;
  right: inherit;
  top: inherit;
  z-index: 99;
  width: 90%;
  max-width: 500px;
        margin: 0 auto;}
    
   .b2b .swiper-header .copy {
        top: 20%;}
    
    .hero .caption {position: relative; padding: 5%; background: rgba(0,0,0,1);}
    .hero .btn.c2a {position: relative; transform: none; left: inherit; bottom: inherit}
    .bg-top-services {background-size: cover; background-position: center}
    .bg-studios {background-size: auto;}
    .bg-visions {background-size: cover;}
    .bg-pat-1 {background-size: auto}
    footer .logo {max-width: 300px; margin-bottom: 40px}
    
    .box-item.b2b .title {font-size: 16px; line-height: 120%;}
    .box-item.b2b .picture {margin-top: 130px; border-radius: 0 0 2rem 2rem; overflow: hidden; height: inherit}
    .box-item.b2b .picture img {border-radius: 0 }
    
}