/* Common styling */
html {scroll-behavior: smooth;}
*{margin: 0;padding: 0;box-sizing: border-box;}
p {font-family: 'Elms Sans', sans-serif;margin-bottom: 0;font-size: 20px;}
body {overflow-x: hidden;font-family: 'Elms Sans', sans-serif;-webkit-text-stroke: unset;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: unset;background-color: #E5E1D6;}
a:hover {text-decoration: none;}
li {list-style: none;}
.common-section {padding: 100px 0;}
.custom-container {max-width: 1540px;width: 81%;margin: 0 auto;}
h1,h2,h3 {margin: 0;font-family: 'top_luxuryregular';}
h2.title {font-size: 42px;font-family: 'top_luxuryregular';color: #B85E3B;margin-bottom: 50px;}
.common-btn {font-size: 18px; border: 1px solid #B85E3B;border-radius: 50px;padding:0;display: inline-block;padding-left: 0;padding-right: 30px;position: relative;z-index: 1;margin-left: 12px;transition: all 0.3s ease-in;vertical-align: middle;}
.common-btn span {padding: 12px 40px;padding-right: 50px;font-size: 18px;border-radius: 50px;display: inline-block;scale: 1.1;color: #B85E3B;transition: all 0.3s ease;}
.common-btn::before {content: "";position: absolute;width: 76%;height: 100%;background-color: #E5E1D6;transition: all 0.3s ease-in;border-radius: 50px;z-index: -1;top: 0;left: 0;scale: 1.1;transition: width 0.5s ease-in-out;}
.common-btn:hover::before {width: 100%; transition: all 0.3s ease-in;}
.common-btn:hover span{padding-right: 20px;transition: all 0.3s ease-in;}
/* .common-btn:hover::before {width: 100%;transition: width 0.5s ease-in-out;} */
/* .common-btn:hover {background-color: #B85E3B;border: 1px solid #B85E3B;} */
.common-btn svg {transition: all 0.5s ease-in-out;}
.common-btn:hover svg {rotate: 32deg; transition: all 0.5s ease-in-out;}

@font-face {
    font-family: 'top_luxuryregular';
    src: url('../fonts/topluxury-webfont.woff2') format('woff2'),
         url('../fonts/topluxury-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/* Header */

.outer-container {max-width: 1800px;margin: 0 auto;width: 93%;}
header .outer-container {display: flex;justify-content: space-between;align-items: center;padding: 20px 0;}
header .light-logo {display: none;}
.hamburger-icon {width: 8%; display: flex;flex-direction: column;gap: 5px;padding: 10px;cursor: pointer;z-index: 4;padding-left: 0;}
.hamburger-icon .bar {width: 28px;height: 2px;background-color: #312A24;transition: all 0.3s ease-in-out;}
header .start-btn{font-size: 16px;letter-spacing: 0.8px;text-transform: uppercase;color: #312A24;z-index: 3;}
header .start-btn:hover {color: #B85E3B;}
header .logo {z-index: 3;}
header {position: fixed;left: 0;right: 0;top: 0;z-index: 2;transition: all 0.5s ease;background-color: #E5E1D6;}
@keyframes slideInUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}
header.show{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 0.3s ease;z-index: 9;box-shadow:0 4px 20px rgba(0,0,0,0.1);
    animation: slideInDown 0.5s ease;
}

header.show .outer-container {padding: 20px 0 ;}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* header {position: sticky;top: 0;left: 0;right: 0;background-color: #fff;z-index: 9;} */

.inverted-header header {background-color: #73685B;}
.inverted-header .start-btn {color: #E5E1D6;}
.inverted-header .hamburger-icon .bar {background-color: #E5E1D6;}

.nav-menu {display: none;}
.nav-menu ul {display: flex;flex-direction: column;justify-content: center;gap: 40px; align-items: start;width: 60%;}
.nav-menu ul li {width: 100%;}
.nav-menu ul li a {color: #fff;font-size: 50px;letter-spacing: 0.8px;text-transform: uppercase;font-family: 'Aboreto', cursive;transition: all 0.3s ease; color: #E5E1D6;display: flex;align-items: center;justify-content: space-between;padding-bottom: 30px;}
.nav-menu ul li:not(:last-child) a {border-bottom: 1px solid #73685B;}
.nav-menu ul li a:hover {color: #B85E3B;padding-left: 20px;font-weight: 700;transition: all 0.3s ease;}
.nav-menu ul li a:hover svg path {fill: #E5E1D6;}
.nav-menu .social-links {display: flex;flex-direction: column;gap: 20px;width: 20%;justify-content: center;align-items: center;}
.nav-menu .social-links p {font-size: 20px;color: #E5E1D6;}
.nav-menu .social-links a img {transition: all 0.3s ease-in;}
.nav-menu .social-links a:hover img {transform: translateY(-3px);transition: all 0.3s ease-in;}

body.menu-opened {overflow: hidden;}
body.menu-opened .nav-menu {display: flex;position: fixed;background-color: #312A24F7;top: 15px;left: 15px;right: 15px;bottom: 15px;border-radius: 30px;justify-content:center;align-items: center;padding: 0 60px;z-index: 3;}
body.menu-opened .hamburger-icon .bar {background-color: #E5E1D6;}
body.menu-opened .hamburger-icon .bar.bar3 {rotate: 45deg;margin-top: -7px;}
body.menu-opened .hamburger-icon .bar.bar2 {display: none;}
body.menu-opened .hamburger-icon .bar.bar1 {rotate: -45deg;}
body.menu-opened header .start-btn {color: #E5E1D6;}
body.menu-opened .light-logo, .inverted-header .light-logo {display: block;}
body.menu-opened .dark-logo, .inverted-header .dark-logo {display: none;}

/* Banner section */
.hero-section {padding-bottom: 100px;}
.hero-section .outer-container , .hero-section .lower-box {display: flex;justify-content: space-between;align-items: center;gap: 60px;}
.hero-section .lower-box {padding: 60px 0;padding-right: 60px;}
.hero-section .mythos-overview {width: 70%;margin: 0 auto;}
.hero-section .mythos-overview p {font-size: 24px;color: #73685B;text-transform: capitalize;margin-bottom: 50px;}
.hero-section h1 p {font-size: 128px;color: #73685B;font-family: 'top_luxuryregular', sans-serif;letter-spacing: 6px;text-transform: uppercase;line-height: normal;}
.hero-section h1 span {color: #B85E3B;display: inline-block;font-family: 'top_luxuryregular'}
.hero-section .img-box {width: 60%;}
.hero-section .img-box img {width: 100%;}
.hero-section .img-box video {height: 405px;object-fit: cover;width: 100%;}
.hero-section .lower-box .img-box video {height: 185px;}

.common-btn.white {border: 1px solid #E5E1D6;color: #E5E1D6;}
/* Work */

.work .custom-container {text-align: center;}
.work .custom-container p {font-size: 32px;margin-bottom: 50px;color: #9F9387;margin-top: 10px;}
.work-grid {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 20px;}
.work-grid img {width: 100%;}
.work-grid .work-box {position: relative;width: 100%;overflow: hidden;}
.work-grid .work-box img {width: 100%;}
.work-grid .work-box::before {content: '';position: absolute;width: 100%;height: 100%;background-color: #312A24;opacity: 0;top: 0;left: 0;z-index: 2;transition: all 0.5s ease;}
.work-grid .work-box .work-content {padding: 50px;position: absolute;bottom: 0;left: 0;z-index: 3;color: #fff;  transform: translateY(100%);transition: all 0.5s ease;}
.work-grid .work-box .work-content h3 {font-size: 55px;margin-bottom: 15px;}
.work-grid .work-box .work-content p {text-transform: capitalize;}
.work-grid .work-box .work-label {position: absolute;padding-top: 35px;left: 50px;color: #fff;font-size: 24px;z-index: 3;transform: translateY(-100%);transition: all 0.5s ease;}

.work-grid .work-box:hover::before{opacity: 0.4;transition-delay: 0.2s;transition: all 0.5s ease;}
.work-grid .work-box:hover .work-content {transform: translateY(0); transition-delay: 0.2s;transition: all 0.5s ease;}
.work-grid .work-box:hover .work-label {transform: translateY(0);transition-delay: 0.2s;transition: all 0.5s ease;}


.brands-logo .inner-container{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 50px;}
.brands-logo .logo-box {width: 13%;text-align: center;}


/* Footer */
.main-footer{background-color: #73685B;color: #fff;position: relative;}
.main-footer .inner-container h3 {font-size: 35px;color: #fff;margin: 30px 0;}
.main-footer p {font-size: 20px;margin-bottom: 10px;}
.bottom-footer {background-color: #887F72;padding: 10px 0;}
.bottom-footer p{font-size: 16px;margin-bottom: 0;}
.main-footer .connect a , .main-footer .connect p {color: #fff;font-size: 24px;}
.main-footer .connect a:hover {color:#312A24; transition: all 0.3s ease-in;}
.main-footer .common-btn {margin-top: 40px;}
.main-footer .cities {display: flex;gap: 20px;justify-content: center;}

.common-btn.orange span {color: #E5E1D6;}
.common-btn.orange::before {background-color: #B85E3B;}
.common-btn:hover svg path {fill: #E5E1D6;}


/* Contact Page */
.inner-banner.contact {padding-bottom: 80px;padding-top: 100px;}
.inner-banner h1 {font-size: 96px;width: 80%;line-height: normal;}
.inner-banner.contact p {font-size: 36px;text-align: right;color: #312A24;}
.inner-banner .btn-box {display: inline-block;}
 .inner-banner .common-btn span {color: #E5E1D6;font-family: 'Elms Sans', sans-serif}


.contact-page h2.title {color: #B85E3B;margin-bottom: 50px;}
.inner-container {width: 88%;margin: 0 auto;max-width: 1680px;}
.contact-page {background-color: #73685B;color: #E5E1D6;}

.hub-details {padding-top: 50px;}
.hub-details .common-box {width: 100%;}
.hub-details .common-box p {font-size: 24px;color: #E5E1D6}
.hub-details .common-box a {color: #E5E1D6;}
.hub-details .common-box a:hover {color: #B85E3B;}
.hub-details h3 {font-size: 24px;margin-bottom: 10px;padding-bottom: 8px;border-bottom: 1px solid #e5e1d6;display: inline-block;opacity: 0.6 !important;}

.dark-bg{background-color: #312A24;color: #E5E1D6;}
.offices-addresses {border-top: 0.5px solid #7D7869;display: flex;justify-content: space-between;flex-wrap: wrap;}
.offices-addresses .common-box {width: 45%;}
.offices-addresses .common-box span {font-size: 96px;display: block;}
.details-box {display: flex;justify-content: end;margin-top: 150px;}
.details-box .con-box {width: 38%;}
.details-box p:not(:last-child) {margin-bottom: 10px;}
.details-box a {color: #E5E1D6;opacity: 0.5;}
.details-box a:hover {opacity: 1;}
.offices-addresses .common-box:nth-of-type(even) {border-right: none;}
.offices-addresses .common-box {width: 50%;padding: 50px;border-right: 0.5px solid #7D7869;border-bottom: 0.5px solid #7D7869}

.contact-section p {font-size: 24px;color: #73685B;margin-bottom: 40px;}
.contact-section .right-box .common-btn::before {width: 73%;}
.contact-section .right-box .common-btn:hover::before {width: 100%;}

.contact-section .inner-container {  display: flex;justify-content: space-between;align-items: start;gap: 60px;}
.contact-section .left-box {width: 45%;}
button {background-color: transparent;}

.contact-section .right-box {width: 50%;}
.contact-section form .form-group {margin-bottom: 50px;}
.contact-section .checkbox-div {display: flex;justify-content: start;flex-wrap: wrap;}
.contact-section form label {font-size: 18px;color: #9F9387;margin-bottom: 10px;display: block;font-weight: 400;}
.contact-section form .form-control {width: 100%;padding: 10px;border: none;border-radius: 0;border-bottom: 1px solid #E5E1D6;font-size: 20px;color: #E5E1D6;box-shadow: none;background-color: transparent;height: auto;}
.contact-section form .form-control:focus {outline: none;box-shadow: none;border-color: #B85E3B;}
.contact-section form .form-check {display: flex;align-items: center;gap: 10px;margin-bottom: 10px;width: 48%;}
.contact-section form .form-check-input {width: 20px;height: 20px;cursor: pointer;accent-color: #B85E3B;margin: 0;}
.contact-section form .form-check-label {font-size: 20px;color: #E5E1D6;margin-bottom: 0;text-transform: capitalize;}
.contact-section form .submit-btn {background-color: #B85E3B;color: #fff;border: none;padding: 15px 40px;border-radius: 50px;font-size: 20px;cursor: pointer;transition: all 0.3s ease;}
.contact-section form .submit-btn:hover {background-color: #312A24;}


/* About Page */
.inner-banner.about h1 {font-size: 64px;width: auto;}
.inner-banner.about p {font-size: 30px;margin-bottom: 40px;}
.inner-banner.about .common-btn:hover svg path{fill: #E5E1D6;}

.video-section {height: 100vh;position: relative;}
.video-section::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);}
.video-section h2 {font-family: 'Elms Sans', sans-serif;font-size: 25px;text-transform: uppercase;color: #E5E1D6;line-height: normal;}
.video-section .video-box {width: 100%;height: 100%;}
.video-section .video-box video {width: 100%;height: 100%;object-fit: cover;vertical-align: bottom;}
.video-section h2 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;width: 100%;}

.story-section h2 {color: #E5E1D6;margin-bottom: 50px;}
.story-section .story-box {display: flex;justify-content: space-between;align-items: end;}
.story-section .story-box:not(:last-of-type){margin-bottom: 120px;}
.story-section .story-box span {font-size: 128px;color: #73685B;margin-bottom: 20px;display: block;font-family: 'Aboreto', cursive;line-height: normal;}
.story-section .story-box h3 {font-size: 55px;color: #E5E1D6;margin-bottom:0;display: block;font-family: 'Elms Sans', sans-serif;text-transform: uppercase;font-weight: 600;}
.story-section .story-box p {font-size: 28px;width: 40%; color: #E5E1D6;font-family: 'Elms Sans', sans-serif;text-transform: uppercase;font-weight: 400;}

.way-section {background-color: #73685B;color: #E5E1D6;}
.way-section h2 {color: #E5E1D6;text-align: center;margin-bottom: 50px;}
.way-section p {font-size: 56px;color: #E5E1D6;font-family: 'Elms Sans', sans-serif;text-transform: uppercase;font-weight: 400;}
.way-section p span {display: block;color: #9F9387;}

.team-section h2 {color: #B85E3B;margin-bottom: 50px;}
.team-section .team-box {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 90px;}
.team-section .team-item {text-align: center;}
.team-section .team-item h3 {font-size: 35px;color: #E5E1D6;margin-bottom: 5px;}
.team-section .img-box {margin-bottom: 15px;overflow: hidden;}
.team-section .img-box img {width: 100%;}
.team-section .img-box.square {border-radius: 50px;}
.team-section .img-box.uneven {border-radius: 200px;}
.team-section .img-box.circle {border-radius: 50%;}
.team-section p {color: #B85E3B;}
/* .team-section .img-box:hover {border-radius: 0;transition: all 0.3s ease-in;} */


.horizontalTab .resp-tab-active {background-color: #312A24 !important;color: #B85E3B; font-weight: 600;}
.resp-tabs-list li {background-color: #E5E1D6 !important;color: #B85E3B;font-weight: 400;}

.single-work {margin-bottom: 40px;}
.single-work p {font-size: 20px; color: #B85E3B;}
.single-work h3 {font-size: 30px; color: #312A24;}
.single-work img{margin-bottom: 20px;}
.single-work.full-work img{width: 100%;}
.single-work.img-radius img{padding: 0 20px;width: 100%;padding-top: 20px;}
.content-box .work-grid {padding-bottom: 20px;}

.thank-you {background-color: #e5e1d6;}
.thank-you .inner-container {text-align: center;padding-top: 50px;}
.thank-you h1 {margin-bottom: 15px;width: 100%;}
.thank-you p a{color: #B85E3B;font-weight: 600;}
.thank-you .common-btn {margin-top: 20px;}

/* dropdown background */
.iti__country-list {
    background-color: #1e1e1e !important;
    color: #fff !important;
    border: 1px solid #444;
}

/* each row */
.iti__country {
    color: #fff;
}

/* hover */
.iti__country:hover {
    background-color: #333 !important;
}

/* selected */
.iti__active {
    background-color: #444 !important;
}

/* arrow + dial code */
.iti__dial-code {
    color: #ccc;
}

/* input wrapper full width */
.iti {
    width: 100%;
}

.page-loader {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid white;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}


/* New Design update */
.hero-section {padding-bottom: 0;}
.banner-section {position: relative;height: 100vh;}
 img.line-img {position: absolute;right: 0;bottom: 0;}
.banner-section .custom-container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.banner-section h1 {font-size: 76px;color: #312A24;font-family: 'top_luxuryregular';width: 78%;animation: fadeIn 1.2s ease forwards;}



.areas-section .areas-grid {display: flex;align-items: center;flex-wrap: wrap;justify-content: center;}
.areas-section .area {display: flex;align-items: center;gap: 20px;width: 32%;justify-content: center;padding-bottom: 30px;margin-bottom: 30px; border-bottom: 1px solid #cbbeb1}
.areas-section .area p {color: #312A24;width: 59%;}
.areas-section .area:last-of-type, .areas-section .area:nth-child(8), .areas-section .area:nth-child(7){border-bottom: none;}

.brands-logo {background-color: #73685B;}
.brands-logo .swiper-slide {text-align: center;}
/* .brands-logo .swiper-slide img {width: 100%;} */

.cta-section {background-color: #9F9387;position: relative;}
.cta-section .custom-container {display: flex;justify-content: space-between;align-items: center;gap: 60px;}
.cta-section h3 {font-size: 36px; color: #fff;width: 60%;}


.works-section {height: 100vh;}
.works-section ul.workbox {display: flex;justify-content: space-between;height: 100%;gap: 1px;}
.works-section ul.workbox li{width: 100%;transition: all 1s ease-in-out;position: relative;overflow: hidden;background-color: #73685B;}
.works-section ul.workbox li.active {width: 100%;transition: all 1s ease-in-out;transition-delay: 1s;background-color: #B85E3B;}
.works-section ul.workbox li:hover {width: 100%;transition: all 1s ease-in-out;}
.works-section ul.workbox.twenty li{width: 20%;height: 100%;}
.works-section ul.workbox li{width: 13%;}
.works-section ul.workbox .con-box ul {margin-top: 20px;}
.works-section ul.workbox .con-box ul li{width: 100%;background-color: transparent;margin-bottom: 10px;position: relative;padding-left: 25px;}
.works-section ul.workbox .con-box ul li::before {content: '';display: block;height: 10px;width: 10px; position: absolute;background-color: #E5E1D6;left: 2px;top: 14px;rotate: -45deg; z-index: -1;}
.works-section li .logo-box .h-icon {position: absolute; top: 10%;left: 50%;transform: translateX(-50%);}
.works-section li.inactive .logo-box .h-icon {display: none;}
.works-section li.inactive .logo-box img{display: none;}
.works-section li.inactive .logo-box p{display:block;font-size: 34px;}
.works-section .container a, .works-section .container p {font-size: 24px;color: #E5E1D6;}
.works-section li .logo-box p {font-size: 40px;color: #E5E1D6;}
.works-section li .logo-box {position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);display: flex;align-items: self-end;height: 100%;justify-content: center;}
.works-section li .logo-box p {margin: 0;writing-mode: sideways-rl;transform: rotate(180deg);width: 100%;}
.works-section .container h2 {font-size: 46px;font-weight: 600;margin-bottom: 30px;width: 80%;letter-spacing: 0;}
.works-section li.active .container .con-box, .works-section li.active .container .img-box img  {display: block;}
.works-section li.active .logo-box {display: none;}
.works-section li.inactive .logo-box {display: flex;}
.works-section li .container .con-box .comp-logo {margin-bottom: 20px;}

.works-section .container {transform: translateX(-100%);transition: transform 1s ease-in-out; display: flex;align-items:center;padding: 60px;;color: #E5E1D6;height: 100%;width: auto;}
.works-section li.active .container {transform: translateX(0);transition: transform 1s ease-in-out;}

.works-section li .container .con-box, .works-section li .container .img-box img {display: none}
.works-section li .container .con-box a {display: block;}


@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.98);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}



/* Load content */
#wrapper {opacity: 0;transition: opacity 0.5s ease;}
#wrapper.visible {opacity: 1;}

/* Loader CSS */
#pageLoader {
  position: fixed;
  inset: 0;
  background: #312A24;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s;
}


/* Center */
.loader-inner {
  text-align: center;
}

/* Logo Wrapper */
.logo-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
}

/* SVG */
.logo-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  fill: #E5E1D6;
  animation: fadeScale 1.2s ease forwards, glow 1s infinite alternate;
}

/* Rotating Ring */
.ring {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(184, 94, 59, 0.3);
  border-top: 1px solid #B85E3B;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
}

/* Brand Text */
.brand-text {
  margin-top: 25px;
  letter-spacing: 2px;
  color: #E5E1D6;
  font-size: 22px;
  opacity: 0;
  animation: fadeIn 1s ease 0.6s forwards;
  font-family: 'top_luxuryregular';
}

/* Animations */
@keyframes rotate {
  to { transform: rotate(360deg); }
}

@keyframes fadeScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glow {
  from {
    filter: drop-shadow(0 0 2px rgba(184, 94, 59, 0.3));
  }
  to {
    filter: drop-shadow(0 0 10px rgba(184, 94, 59, 0.8));
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}