header {

position: fixed;

width: 100%;

z-index: 999;

top: 0;

left: 50%;

transform: translateX(-50%);

padding: 1em;

background: transparent;

transition: all 0.3s ease-in-out;
}

header.fixed,
.fixed-hold {

background: var(--black);
}

header nav ul {

display: flex;

align-items: center;

gap: 1em;
}

header nav ul li {

list-style: none;
}

header nav ul li a {

color: var(--black);

font-weight: 500;

font-size: 0.8em;

line-height: 1;

transition: all 0.3s ease-in-out;
}

header nav ul li a:hover,
header nav ul li a.active {

color: var(--light-red);
}

header.fixed nav ul li a,
header.fixed-hold nav ul li a {

color: var(--white);
}

header.fixed nav ul li a:hover,
header.fixed-hold nav ul li a:hover,
header.fixed nav ul li a.active,
header.fixed-hold nav ul li a.active {

color: var(--light-red);
}

table td {
    padding: 0.5em 1.5em;
}

/*/////////////////////////////////////////////////////// HOME
*/
.home {

height: 70em;

max-height: 100vh;

position: relative;

background-color: transparent;

background-position: bottom;

padding: 0;
}

.home__banner-bg {

width: 100%;

max-width: 2000px;

height: 70em;

max-height: 100vh;

object-fit: cover;

position: fixed;

top: 0;

left: 50%;

transform: translateX(-50%);

z-index: -1;

filter: brightness(0.95) contrast(0.75);
}

.home__banner-logo {
    
position: absolute;
    
bottom: 2em;
    
left: 50%;
    
transform: translateX(-50%);
    
width: 90%;
}

.home__tp {

position: absolute;

top: 6em;

right: -2.5em;

transform: rotate(-90deg);

text-align: right;

z-index: 1;

opacity: 0.5;
}

.home__tp--word {

font-family: "Playfair", "Times New Roman", Times, serif;

font-size: 5em;

line-height: 1;

font-weight: 100;

color: var(--light-white);
}


/*/////////////////////////////////////////////////////// FEATURED
*/
.featured {

display: flex;

align-items: center;

justify-content: space-around;

flex-wrap: wrap;

gap: 1.5em;
}

.feature {

overflow: hidden;

border-radius: 5px;

position: relative;
}

.feature.new::before {
    content: 'NEW';
    position: absolute;
    top: 2em;
    left: -0.1em;
    padding: 0.5em 1.5em;
    background: var(--red);
    border-radius: 3px;
    color: var(--white);
}

.feature__img {

height: 25em;

width: 15em;

max-width: 90vw;

object-fit: cover;
}

div.feature__heart {

position: absolute;

top: 1em;

right: 1em;

line-height: 1;

font-size: 1.5em;

background: var(--white);

border-radius: 500px;

display: flex;

align-items: center;

justify-content: center;

height: 1.5em;

width: 1.5em;

cursor: pointer;

color: var(--bg-grey) !important;

transition: all 0.3s ease-in-out;
}

.feature__heart:hover {
    color: var(--light-red) !important;
    box-shadow: 1px 1px 5px var(--bg-grey);
}

/*/////////////////////////////////////////////////////// ECOMMERCE
*/
.ecommerce {

padding: 2em 5em;

text-align: right;

background: var(--light-grey);

background: linear-gradient(100deg, var(--light-grey) 0%, var(--white) 100%);
}

.home__cl {

position: absolute;

top: 3em;

right: 0;

text-align: right;

z-index: 1;

font-size: 3em;

opacity: 0.5;
}

.home__cl--word {

font-family: "Playfair", "Times New Roman", Times, serif;

font-size: 5em;

line-height: 1;

font-weight: 100;

color: var(--light-white);
}


/*/////////////////////////////////////////////////////// CLIENTS
*/

.clients {
    padding-top: 3em;
}

.clients .panels {

align-items: flex-end;

z-index: 2;

position: relative;
}

.clients .slide-image {
    filter: grayscale(1);
    transition: all 0.3s ease-in-out;
}

.clients .slide:hover .slide-image {
    filter: grayscale(0);
    opacity: 1;
}


/*/////////////////////////////////////////////////////// ABOUT
*/

.about,
.appointment {
    padding-bottom: 0;
}

.about__founder {

position: relative;

margin-bottom: 1em;
}

.about__founder--img {

width: 100%;

object-fit: cover;

position: relative;
}

.about__founder--txt {

transform: rotate(-90deg) translateX(50%);

position: absolute;

bottom: 0;

right: -8em;
}

.about p {
    
text-align: justify;
}

/*/////////////////////////////////////////////////////// COLLECTIONS
*/
.collections {
    
padding: 10em 5em 0;
}
.slider {width: 100%;margin: auto;overflow:hidden;position: relative;}
.slider-wrap {animation: scroll 10s linear infinite;display: flex;align-items: center;width: calc(300px * 8.5);height:100%;}
.slide-image{width:80%;height:100%;object-fit:cover;}
.slide{width: 300px;height:100%;text-align:center;transition: all 0.3s ease-in-out;}
.slide:hover {
    transform: scale(1.1);
}
@keyframes scroll{
    0% {
    transform: translateX(0);
    }
    100% {
    transform: translateX(calc(-250px * 3));
    }
}


/*/////////////////////////////////////////////////////// FOOTER
*/
footer {

background: var(--black);

display: flex;

align-items: flex-start;

justify-content: space-around;

flex-wrap: wrap;

padding: 3em;

box-sizing: border-box;

position: relative;

left: 50%;

transform: translateX(-50%);

gap: 3em;
}

.footer__logo {

margin-right: auto;

display: block;
}

.footer__logo img {

display: block;

width: 15em;
}

.footer__menus {

display: flex;

gap: 3em;

flex-wrap: wrap;

justify-content: space-around;
}

.footer__menu {

text-align: left;
}

.footer__menu--title {

font-size: 1.2em;

line-height: 1;

font-weight: 500;

margin-bottom: 0.5em;

color: var(--white);

margin-left: -0.25em;
}

.footer__menu ul li {
    
list-style: none;
    
font-size: 0.8em;
}

.footer__menu ul li a {

color: var(--white);

font-weight: 500;

font-size: 0.85em;

line-height: 1;

transition: all 0.3s ease-in-out;
}

.footer__menu ul li a:hover {
    color: var(--light-red);
}

.followus {

width: 20em;

max-width: 95vw;
}

.followus__socials {

display: flex;

align-items: center;

gap: 1em;

margin: 1em 0 1.5em;
}

.followus__social {height: 1.2em;width: 1.2em;display: block;}

.followus__social svg {

height: 100%;

width: 100%;

display: block;

fill: var(--white);

transition: all 0.3s ease-in-out;
}

.followus__social:hover svg {
fill: var(--light-red);
}

.followus__p {

color: var(--white);

font-size: 0.6em;

line-height: 1.5;

text-align: justify;
}