@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

@font-face {
  font-family: "Season";
  /* Choose a name for your font */
  src: url("../font/Fontspring-DEMO-theseasons-reg.otf") format("woff");
  /* Add additional file formats if necessary */
  /* Add more src declarations for other font formats if needed */
}

@font-face {
  font-family: "graphik";
  src: url("../font/GraphikRegular.otf") format("woff");
  /*src: url("../font/OliveraObl_Demo.ttf") format("woff");*/
}

:root {
  --primary: #3A3B3E;
}



body {
  font-family:'graphik', sans-serif;
  overflow-x: hidden;
}


html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}


.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #191919;
  z-index: 1000;
  text-align: center;
}

.logo-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 150px;
  /* Adjust the size as needed */
}

.buffering {
  position: absolute;
  border: 4px solid #f3f3f3;
  /* Light grey */
  border-top: 4px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 200px;
  /* Adjust to fit around the logo */
  height: 200px;
  /* Adjust to fit around the logo */
  animation: spin 2s linear infinite;
}

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

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

@media only screen and (min-width: 600px) {
  .scroll {
    scroll-snap-align: start;
    scroll-snap-stop: always;

    display: flex;
    align-items: center;
    justify-content: center;
  }

}

.default-font {
  font-family: "Josefin Sans", sans-serif;
}

.the-season-font {
  font-family: "Season";
}

* {
  margin: 0px;
  padding: 0px;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #3A3B3E;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #3A3B3E;
}

.header-section {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden
}


.theme-bg-new {
  background-color: #191919;
}

.header {
  background-color: rgba(0, 0, 0, 0.507);
  height: 100vh;
  position: absolute;
  top: 0;
  width: 100%;

}


.video-container {
  position: relative;
  width: 100%;
  /* padding-bottom: 100%; */
  /* 16:9 aspect ratio */
  height: 0;
  /* overflow: hidden; */
}

.video-container video {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  /* height: 100%; */
  /* object-fit: cover; */
}

@media only screen and (max-width: 600px) {

  .header-section {
    height: 100%;
    /* background-color: #191919; */
  }

  .header {
    height: 99% !important;
  }

  .video-container {
    position: relative;
    width: 100%;
    /* padding-bottom: 100%; */
    /* 16:9 aspect ratio */
    /* height: 0; */
    /* overflow: hidden; */
  }

  .video-container video {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh
      /* object-fit: cover; */
  }
}


.myVideo {
  /* position: fixed; */
  right: 0;
  bottom: 0;
  width: 100%;
}

.banner-heading h1 {
  font-size: 3rem;
}

@media only screen and (max-width: 400px) {
  .banner-heading h1 {
    font-size: 1.5rem !important;
  }
  
  .banner-heading p {
    font-size: 1rem !important;
  }

}

@media only screen and (max-width: 600px) {
  .banner-heading h1 {
    font-size: 1.8rem;
  }

  .banner-heading {
    bottom: 30% !important;
  }

  .contact-us-text {
    left: 0% !important;
  }

}

.menu i {
  font-size: 2.5rem;
  position: absolute;
  top: 2%;
  left: 4%;
}


.section-heading h2 {
  width: fit-content;
}

.header-section {
  position: relative;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 250px;
  background: #333;
  padding-top: 60px;
  transform: translateX(-250px);
  transition: transform 0.3s ease;
  z-index: 1000;
}

.sidebar.active {
  transform: translateX(0);
}

.sidebar a {
  padding: 10px 15px;
  text-decoration: none;
  font-size: 18px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  background: #575757;
}

.close-icon {
  font-size: 25px;
  cursor: pointer;
  color: #fff;
  position: absolute;
  top: 20px;
  right: 20px;
}

body.no-scroll {
  overflow: hidden;
}


.banner-heading {
  position: absolute;
  bottom: 40%;
  left: 8%;
}

.about-section {
  height: 100vh;
  background: url('../images/about-bg.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .about-section {
    height: 100%;
    padding: 3rem 1rem;
    text-align: center;
  }
}

.about-section p {
  font-size: 2rem
}

.pinal-section {
  height: 100vh;
  /* background: url('../images/pinal.svg'); */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #191919;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .pinal-section {
    height: 100%;
    padding: 5rem 1rem;
  }
}

.pinal-section p {
  font-size: 2rem;
}

.dream-section {
  height: 100vh;
  background: url('../images/dream-bg.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

@media only screen and (min-width: 600px) {
  .dream-section img {
    height: 100vh;
  }
}


@media only screen and (max-width: 600px) {
  .dream-section {
    height: 100%;
    padding: 5rem 1rem;
  }

  .dream-section img {
    height: auto !important;
  }
}


.dream-section p {
  font-size: 2rem;
}

.company-section {
  height: 100vh;
  background: url('../images/company.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .company-section {
    height: 100%;
    background: #ffffff;
  }
}

.why-section {
  height: 100vh;
  background: url('../images/why-bg.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .why-section {
    height: 100%;
  }
}

.why-section p {
  font-size: 2rem;
}


.why-bespoke {
  height: 100vh;
}

@media only screen and (max-width: 600px) {
  .why-bespoke {
    height: 100%;

  }
}

.hr {
  border: 1.5px solid #E49137;
}

.step-1 {
  height: 100vh;
  background: url('../images/step-1.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.step-2 {
  height: 100vh;
  background: url('../images/step-1.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .step-1 {
    height: 100%;
  }

  .step-2 {
    height: 100%;
  }
}

.contact-us-text {
  position: absolute;
  bottom: 5%;
  left: 8%;
}

.artist-section {
  margin-top: -10px;
}

.artist-section h3 {
  width: fit-content;
}

.text-justify {
  text-align: justify;
}

.bg-main {
  background-color: var(--primary) !important;
}

.bg-outline-main {
  border: 1px solid var(--primary) !important;
  border-radius: 5px;
  font-weight: 500;
  transition: all 0.2s linear;
}

.bg-outline-main:hover {
  background-color: var(--primary);
  color: black !important;
}

/* .mision-card {
  background: url("../images/card-bg.jpg");
  background-position: center;
  background-size: cover;
} */
/* .vision-card {
  background: url("../images/card-bg2.jpg");
  background-position: center;
  background-size: cover;
} */
/* .value-card {
  background: url("../images/card-bg3.jpg");
  background-position: center;
  background-size: cover;
} */

.theme-text {
  color: #3A3B3E;
}

.theme-text2 {
  color: #CACACA;
}

.theme-bg {
  background-color: #191919;
}

.theme-bg2 {
  background-color: #332A29;
}


.light-bg {
  background-color: rgba(0, 0, 0, 0.67) !important;
}

/* .company-section {
  background: url("../images/3.JPG");
  background-size: cover;
  background-position: center;
  height: 100vh;
} */




@media only screen and (max-width: 600px) {
  .navbar-brand img {
    width: 50% !important;
  }
}

.pinal-section,
.pinal-section img {
  height: 100vh;
}

@media only screen and (max-width: 600px) {
  .pinal-section {
    height: 100%;
  }

  .pinal-section img {
    height: auto !important;
  }
}

.company-section {
  position: relative;
}

.company-section .section-heading {
  position: absolute;
  top: 0px;
  z-index: 999999999999999999999999999999999;
}

.project-section h3 {
  width: fit-content;
}

.product-name {
  font-size: 12px;
  padding: 10px 0px;
  margin-bottom: 0px;
}

.contact-us h3 {
  width: fit-content;
}

.form {
  width: 60%;
  margin: auto;
}

@media only screen and (max-width: 600px) {
  .form {
    width: 100%;
  }
}

.form .iti {
  width: 100% !important;
}

.form .submit-btn {
  background-color: black;
}

.blog-card {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.blog-card img {
  border-radius: 8px 8px 0px 0px;
}

.blog-card a {
  text-decoration: none;
}

.footer-link ul li {
  list-style: none;
}

.footer-link ul li a {
  text-decoration: none;
}

.transform {
  height: 100vh;
}

.transform img {
  width: 100%;
}

.transform-text {
  background-color: #fff;
  height: 100vh;
}

.why-section {
  position: relative;
}

.why-text {
  position: absolute;
  bottom: 0px;
  width: 100%;
}

.shadow-img {
  box-shadow: inset 250px -214px 100px 10px #332A29;
}


.how-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .how-section {
    height: 100%;
  }

  .how-its-work {
    height: 99% !important;
  }
}

.how-section video {
  /* position: relative; */
  /* height: 100vh;    */
  width: 100%;
}

.how-its-work {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.507);
}

.acheivement {
  height: 100vh;
  background: url('../images/achivement-bg.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .acheivement {
    height: 100%;
  }
}

.achive-bar {
  overflow: hidden;
}

.achive-bar .row {
  white-space: nowrap;
}

.achive-bar .col {
  display: inline-block;
  margin-right: 20px;
  /* Adjust as needed */
}

.all-heading {
  background: rgb(51, 42, 41);
  background: linear-gradient(180deg, rgba(51, 42, 41, 1) 0%, rgba(51, 42, 41, 0) 100%);
}

.all-heading2 {
  background: rgb(184, 176, 171);
  background: linear-gradient(180deg, rgba(184, 176, 171, 1) 0%, rgba(184, 176, 171, 0) 100%);
}

.text-section1 {
  height: 100vh !important;

}

.text-shadow {
  background: rgb(51, 42, 41);
  background: linear-gradient(180deg, rgba(51, 42, 41, 1) 0%, rgba(51, 42, 41, 0) 51%, rgba(51, 42, 41, 1) 100%);
}


.bond-section {
  height: 100vh;
}

.contact-text-section {
  height: 100vh;
}

.life-time-investment {
  background: rgb(58, 59, 62);
  background: linear-gradient(180deg, rgba(58, 59, 62, 0) 0%, rgba(58, 59, 62, 0.6084558823529411) 100%);
}



.acheivement-section,
.what_you_want {
  position: relative;
}

/* .about-us-section .about-text {
  position: absolute;
  top: 40%;
} */



/* .about-pinal-section .about-pinal-text {
  position: absolute;
  top: 25%;
  left: 10%;
} */
/* 
.about-pinal-section h1 {
  font-size: 4.5rem;
  color: #ffffff;
} */

/* .about-pinal-section p {
  font-size: 3rem;
  color: #CFCFCF;
}

.about-pinal {
  height: 100vh;
  overflow-y: hidden;
  overflow-x: hidden;
} */



.why-text-heading {
  color: #30373E;
}

.how_do_work p {
  color: #CACACA;
}

/* .achive-main {
  position: absolute;
  top: 10%;
  left: 12%;
  margin-right: auto;
  margin-left: auto;
  height: 100%;
  width: 100%;
} */

.footer-section ul {
  list-style: none;
}

.footer-section a {
  text-decoration: none;
  color: #ffffff;
}

.what_you_want .what_you_want_text {
  position: absolute;
  top: 28%;
  left: 15%;
}