html { scroll-behavior: smooth;}
@font-face {
    font-family: 'urwdin';
    src: url('../fonts/urw-din-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    }

.text-gray { color:rgba(255, 255, 255, .35); }
body { margin: 0; overflow-x: hidden; transition: transform 0.3s ease; font-family: 'urwdin'; background-color: #000; color:#fff; font-size:17px; }
.main-nav { position: fixed; top: 0; left: -250px; width: 250px; height: 100%; color: white; padding-top: 60px; transition: left 0.3s ease; z-index: 1000; background: #43392e; background: linear-gradient(180deg, rgba(23, 19, 14, 0.93) 0%, rgba(67, 57, 46, 0) 100%); }
.main-nav a { display: block; color: white; padding: 15px 40px; text-decoration: none; font-size: 20px; text-transform: uppercase; letter-spacing: .15rem; }
.main-nav a:hover { background: rgba(0,0,0,.5); }
.menu-button { position: fixed;  top: 55px; left: 60px; background:transparent; color: #fff; cursor: pointer; z-index: 1100; border: none; width:40px; height:33px; padding:0; margin:0; transition: all 0.3s ease;  }
.menu-button span { display: block; width:100%; height:4px; background-color: #fff; border-radius: .25rem; margin-bottom:8px; transition: all 0.3s ease;  }
.main { transition: transform 0.3s ease; text-align: center; overflow-x:hidden !important;    }

body.nav-open .main-nav { left: 0; }
body.nav-open .main { transform: translateX(250px);}
body.nav-open .menu-button { top:20px; left:210px; width:30px; height:30px;   }
body.nav-open .menu-button span:nth-child(3) { display:none; }
body.nav-open .menu-button span:nth-child(1) { transform:rotate(-45deg) }
body.nav-open .menu-button span:nth-child(2) { transform:rotate(45deg); margin-top:-12px; }

.text-fs-21 { font-size:21px;}
.text-fs-30 { font-size:30px; }
.text-fs-50 { font-size:50px; }
.text-fs-60 { font-size:60px; }

h1 { font-size: clamp(32px, 3vw, 60px); }
h2 { font-size: clamp(26px, 1vw, 40px); }
footer { background:#000; padding:clamp(20px,5vw,80px) 0}
.mw-520 { max-width: 520px; }
.mw-920 { max-width: 920px; }


.text-cormorant { font-family: "Cormorant", serif; }
.btn-white { font-size:30px; border:1px solid #ccc; padding:1rem 3rem; text-decoration:none; background-color: #fff;   }
.btn-white:hover { background:#000; color:#fff !important; border:1px solid #000; }
.btn-inquire { position:fixed; top:50px; right:40px; z-index:1000; }

/** Home Page **/
body.home-page { background: #000 url(../img/bg-home.jpg) 0 0 no-repeat; background-size:100%; background-attachment: fixed;}
.floating-boxes { position:relative; z-index: 10; max-width:1090px; width:90%; margin:auto auto 275px;  }
.floating-box { will-change: transform; transition: transform 0.2s ease-out; z-index: 10; }
.box-color-search { position:absolute; top:330px; left:-65px; z-index:1; }
.box-wishlist { position:absolute; top:100px; right:-95px; z-index:1; }
.box-related-products { position:absolute; bottom:-75px; right:95px; z-index:1; }

.inner-page-type .studioality-logo { max-width:225px; margin-left: 140px; }
.object-fit-cover { width:100%; height: 100%; object-fit: cover;}


/** About Page **/
body.about-page { background: #000 url(../img/bg-about.jpg) 0 0 no-repeat; background-size:100%; background-attachment: fixed;}

/** Work **/
body.work-page { background: #111 url(../img/bg-work.jpg) 0 0 no-repeat; background-size:100%; background-attachment: fixed;}


/** Contact **/
body.contact-page { background: #111 url(../img/bg-contact.jpg) 0 0 no-repeat; background-size:100%; background-attachment: fixed;}
 .home-page .studioality-logo { max-width:50% !important;  }

/** Special Features **/
body.special-features-page { background: #111 url(../img/bg-special-features.jpg) 0 0 no-repeat; background-size:100%; background-attachment: fixed; }

@media (max-width:1280px){
    .home-page .studioality-logo { max-width:600px;  }
}

@media (max-width:990px){
    body.home-page { background: #000 url(../img/bg-home-mobile.jpg) 0 0 no-repeat; background-size:100%;}
    body.about-page { background: #000 url(../img/bg-about-mobile.jpg) 0 0 no-repeat; background-size:100%;}
    body.contact-page { background: #111 url(../img/bg-contact-mobile.jpg) 0 0 no-repeat; background-size:100%; }

    .floating-boxes { width:90%; }
    .box-color-search { width:250px; top: 450px; left:-30px; }
    .box-wishlist { width:200px; top: 50px; right:-55px; }
    .box-related-products { bottom:50px; width:350px; right:-60px;  }
    .inner-page-type .studioality-logo { max-width:180px; margin-left: auto; margin-right:auto; margin-top:-20px; }
    .home-page .studioality-logo { max-width:400px;  }
}

@media (max-width:768px){
    .btn-inquire { top:25px; right:15px; font-size:12px; }
    .menu-button {  top: 30px; left: 30px;   }
    .home-page .studioality-logo { max-width:200px; margin-top:-10px; }
    body.home-page { background: #000 url(../img/bg-home-mobile.jpg) 0 0 no-repeat; background-size:100%; background-attachment: scroll;}
    body.about-page { background: #000 url(../img/bg-about-mobile.jpg) 0 0 no-repeat; background-size:cover; background-attachment: scroll}
    body.contact-page { background: #111 url(../img/bg-contact-mobile.jpg) 0 0 no-repeat; background-size:cover; background-attachment: scroll }
}