@font-face {
  font-family: "Montreal Regular";
  src: url(./fonts/Montreal-Regular.woff);
}
@font-face {
  font-family: "Montreal Bold";
  src: url(./fonts/Montreal-Bold.woff);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montreal Regular";
  text-decoration: none;
}
html,
body {
  width: 100%;
  height: 100%;
  background-color: rgb(239,223,187);
}


.preloader {
  background-color: #000;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  overflow: hidden;
  display: block;
  pointer-events: none;
}

#main {
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: rgb(30,40);
}

header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: clamp(2.25rem, 2.1786rem + 0.3571vi, 2.5rem);
  padding-right: clamp(2.25rem, 2.1786rem + 0.3571vi, 2.5rem);
}
header .logo-left {
  width: 50%;
  display: flex;
  align-items: center;
  gap: 4rem;
}
header .logo-left p {
  color: #6b645c;
  font-family: "Montreal Regular";
  font-size: 18px;
}
header .menu {
  width: 50%;
  flex-grow: 1;
  display: flex;
  justify-content: end;
  gap: 0.5rem;
}
.menu-line {
  width: min-content;
  height: 1.25rem;
  min-height: 1.25rem;
  position: relative;
  overflow: hidden;
}

.nav-link.top-1 {
  margin-top: -1.25rem;
}

.nav-link {
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-line:hover .nav-link.top-1 {
  transform: translateY(20px);
}

.menu-line:hover .nav-link:not(.top-1) {
  transform: scale(1.2) translateY(20px);
}

header .menu a {
  color: #6b645c;
  transition-property: all;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Page 1 */

#page {
  width: 100%;
  height: 100vh;
  padding-left: clamp(2.25rem, 2.1786rem + 0.3571vi, 2.5rem);
  padding-right: clamp(2.25rem, 2.1786rem + 0.3571vi, 2.5rem);
}

#page .top h1 {
  text-wrap: balance;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-top: 2rem;
}
#page .top h1 svg {
  width: 100%;
  height: 100%;
}
#page .top h1 svg path {
  transform: translateY(100%);
  opacity: 0; /* Optional fade-in effect */
}

#page .bottom {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: 4rem;
  position: relative;
  height: 30vh;
  padding-bottom: 4rem;
}

#page .bottom .left {
  height: 45vh;
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
#page .bottom .left h4 svg {
  font-size: 28px;
}
#page .bottom .left p {
  font-size: clamp(1rem, 0.9286rem + 0.3571vi, 1.25rem);
  color: rgb(107 100 92/1);
  max-width: 30ch;
  line-height: 120%;
  text-wrap: balance;
}

#page .bottom .left button {
  background-color: rgb(57 54 50 / 1);
  padding-left: clamp(2.25rem, 2.1786rem + 0.3571vi, 2.5rem);
  padding-right: clamp(2.25rem, 2.1786rem + 0.3571vi, 2.5rem);
  padding-top: clamp(1.125rem, 1.0893rem + 0.1786vi, 1.25rem);
  padding-bottom: clamp(1.125rem, 1.0893rem + 0.1786vi, 1.25rem);
  color: rgb(232 232 227 / 1);
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: clamp(1rem, 0.9286rem + 0.3571vi, 1.25rem);
  border: none;
  border-radius: 50px;
}

#page .bottom .left button:hover {
  background-color: rgb(140 140 115/1);
}

#page .bottom .middle {
  grid-column: span 4;
  height: 45vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page .bottom .middle .image {
  overflow: hidden;
  width: 20vw;
  height: 55vh;
  position: relative;
}
#page .bottom .middle img {
  filter: grayscale(100%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  transition: all 0.3s linear;
}
#page .bottom .middle img:hover {
  filter: grayscale(0);
}
#page .bottom .right {
  height: 45vh;
  grid-column: span 4;
  display: flex;
  align-items: end;
  justify-content: end;
  flex-direction: column;
}
#page .bottom .right p {
  color: rgb(107 100 92/1);
  font-size: clamp(0.875rem, 0.5393rem + 0.5786vi, 1rem);
  text-transform: uppercase;
}
#page .bottom .right h2 {
  font-size: clamp(3rem, 2.25rem + 3.75vi, 5.625rem);
  text-transform: uppercase;
  color: rgb(57 54 50/1);
}

/* Page 2 Started */

#page2 {
  width: 100%;
  min-height: 100vh;
  background-color:#1c1b19;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  padding: clamp(4.5rem, 4.3571rem + 0.7143vi, 5rem)
    clamp(1.6875rem, 1.6339rem + 0.2679vi, 1.875rem);
}

#page2 h2 {
  color: #d1d1c7;
  font-size: clamp(3rem, 2.25rem + 3.75vw, 5.625rem);
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}
#page2 h2 span {
  display: inline-block;
  transform: translateY(100%); /* Start each span below */
  opacity: 0; /* Initially hidden */
}

#page2 .serviText {
  display: flex;
  width: 100%;
  justify-content: end;
  align-items: flex-start;
  gap: 3rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

#page2 .serviText .para {
  color: rgb(107 100 92/1);
  font-size: clamp(0.875rem, 0.5393rem + 0.5786vi, 1rem);
  text-transform: uppercase;
}
#page2 .serviText .serviText2 {
  width: 35%;
  font-size: clamp(1rem, 0.9286rem + 0.3571vi, 1.25rem);
  color: rgb(107 100 92/1);
  line-height: 120%;
  text-wrap: balance;
}

/* Page2 services */
#page2 .services {
  width: 100%;
  padding: 3rem 0rem;
  position: relative;
}
#page2 .services .one {
  display: flex;
  align-items: flex-start;
  background-color: #1c1b19;
}
#page2 .services .border {
  border-top: 1px solid #393632;
  padding-top: 3rem;
}

#page2 .services .one .oneL {
  width: 50%;
}

#page2 .services .one .oneL h2 {
  color: #d1d1c7;
  font-size: clamp(1.9531rem,1.496rem + 2.2854vi,3.5529rem);
  font-family: "Montreal Regular";
}
#page2 .services .one .oneR {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
}


#page2 .services .one .oneR h3{
  font-size: clamp(1.9531rem,1.496rem + 2.2854vi,3.5529rem);
  font-family: "Montreal Regular";
  color: #d1d1c7;
}
#page2 .services .one .oneR p {
  color: #a29e9a;
  padding-top: clamp(1.125rem,1.0893rem + 0.1786vi,1.25rem);
  padding-bottom: clamp(1.125rem,1.0893rem + 0.1786vi,1.25rem);
  max-width: 80%;
}
#page2 .services .one .oneR .list {
  padding-top: clamp(1.125rem,1.0893rem + 0.1786vi,1.25rem);
  padding-bottom: clamp(1.125rem,1.0893rem + 0.1786vi,1.25rem);
  color: #a29e9a;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: flex-start;
  width: 100%;
}

.listItem.bt{
  border: none !important ;
}
#page2 .services .one .oneR .list .listItem {
  font-size: clamp(1.25rem,1.0359rem + 1.0707vi,1.9995rem);
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #393632;
  width: 100%;
  padding-bottom: 1rem;

  gap: 2rem;
}
#page2 .services .one .oneR .list .listItem span {
  font-size: clamp(1rem,0.9286rem + 0.3571vi,1.25rem);
  padding-top: 5px;
}



/* Page 3 */

#page3 {
  width: 100%;
  min-height: 100vh;
  background-color: #1c1b19;
  padding: clamp(4.5rem, 4.3571rem + 0.7143vi, 5rem)
    clamp(1.6875rem, 1.6339rem + 0.2679vi, 1.875rem);
}

#page3 h2 {
  color: #d1d1c7;
  font-size: clamp(3rem, 2.25rem + 3.75vw, 5.625rem);
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}
#page3 h2 span {
  display: inline-block;
  transform: translateY(100%); /* Start each span below */
  opacity: 0; /* Initially hidden */
}

#page3 .serviText {
  display: flex;
  width: 100%;
  justify-content: end;
  align-items: flex-start;
  gap: 3rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

#page3 .serviText .para {
  color: rgb(107 100 92/1);
  font-size: clamp(0.875rem, 0.5393rem + 0.5786vi, 1rem);
  text-transform: uppercase;
}
#page3 .serviText .serviText2 {
  width: 35%;
  font-size: clamp(1rem, 0.9286rem + 0.3571vi, 1.25rem);
  color: rgb(107 100 92/1);
  line-height: 120%;
  text-wrap: balance;
}
.zero {
  font-size: 20rem;
  color: #a19d99;
}
.topMain {
  display: flex;
   margin-bottom: 60px;
  align-items: flex-start;
}
#page3 .top {
  position: relative;
  width: 40%;
}
#page3 .topright {
  width: 50%;
  height: 100vh;
}
#page3 .topright .image1{
 width: 100%;
 height: 100%;
 object-fit: cover;
 position: relative;
 overflow: hidden;
}
#page3 .topright .image1 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
 }
#page3 .num {
  font-size: 20rem;
  color: #a19d99;

}
#page3 .top .topleft {
  overflow: hidden;
  overflow-y: auto;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: 10px;
  left: 230px;
  scrollbar-width: none;
}


/*  */


.video-mockup img {
  width: 700px;        /* Keep it responsive */
  height: auto;       /* Auto maintain aspect ratio */
  display: block;
  object-fit: cover;  /* Ensures image covers the container without stretching */
}

/*  */
/* Footer Base */
/* Footer Base Styles */
.custom-footer {
  background: #1c1b19;
  color: #eee;
  padding: 60px 0 0;
  margin-top: auto; /* Pushes footer to bottom */
  font-family: 'Arial', sans-serif;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Columns */
.footer-col {
  padding: 15px;
}

.footer-col h3 {
  color: #ff5e14;
  margin-bottom: 25px;
  font-size: 1.3rem;
  position: relative;
}

.footer-col h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 50px;
  height: 2px;
  background: #ffffff;
}

/* Contact Items */
.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.contact-item i {
  color: #dbdbdb;
  margin-right: 15px;
  font-size: 1.1rem;
}

/* Newsletter Column (Right Side) */
.newsletter-col {
  grid-column: span 1;
}

.newsletter-desc {
  color: #aaa;
  margin-bottom: 25px;
  line-height: 1.6;
}

.newsletter-form {
  display: flex;
  gap: 10px;
}

.email-input {
  flex: 1;
  padding: 12px 15px;
  border: none;
  border-radius: 4px;
  background: #2a2a2a;
  color: white;
}

.submit-btn {
  background: #ff5e14;
  color: white;
  border: none;
  padding: 0 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.submit-btn:hover {
  background: #e04b0a;
}

/* Footer Bottom */

.social-links {
  display: flex;
  gap: 15px;
}

.social-links a {
  color: #aaa;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.social-links a:hover {
  color: #ff5e14;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .newsletter-form {
    flex-direction: column;
  }
}
.copyright-notice {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  padding: 20px 0;
  border-top: 1px solid #1c1b19;
  background: #1c1b19;
}

.legal-text {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

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

.footer-divider {
  display: flex;
  justify-content: center;
  padding: 40px 0 20px;
  background: #1c1b19; /* Match your footer bg */
}

.divider-line {
  width: 350px; /* Line length */
  height: 3px;
  background: linear-gradient(90deg, 
             transparent 0%, 
             #eeeeee 20%, 
             #ffffff 80%, 
             transparent 100%);
  opacity: 0.7;
}

/* Animation (optional) */
.footer-divider {
  animation: fadeInDivider 1s ease-out forwards;
}

@keyframes fadeInDivider {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.footer {
  padding: 60px 40px;
  background-color:  #1c1b19;
  color: #fff;
  font-family: 'Inter', sans-serif;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 60px;
}

.footer-col {
  flex: 1;
  min-width: 240px;
}

.footer-col h3 {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  color: #fff;
}

.footer-col p {
  font-size: 14px;
  margin: 6px 0;
  font-weight: 500;
  color: #ccc;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col li {
  margin-bottom: 8px;
}

.footer-col a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 280px;
}

.newsletter-form input {
  padding: 12px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-size: 14px;
  border-radius: 8px;
  outline: none;
}

.newsletter-form input::placeholder {
  color: #bbb;
}

.newsletter-form button {
  padding: 10px 20px;
  background-color: #fff;
  color: #000;
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}

.footer-headline h1 {
  font-size: 18px;
  font-weight: 800;
  max-width: 800px;
  line-height: 1.4;
  margin: 0 auto 50px auto;
  text-align: center;
}

.footer-bottom {
  text-align: center;
  font-size: 12px;
  color: #888;
}