header {
   position: absolute;
   width: 100%;
}

header div {
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
   padding: 10px 4vw;
   background-color: #000000a1;
}

header p {
   white-space: nowrap;
   font-size: 1.4rem;
   text-transform: capitalize;
}

header nav {
   display: flex;
   gap: 10px 20px;
}

header nav > a {
   padding: 4px 10px;
   border-radius: 6px;
   font-size: 1rem;
   transition: all 0.5s ease-in;
}

/*header nav > a:last-child {*/
/*   text-transform: uppercase;*/
/*   background-color: #000000;*/
/*}*/

header nav > a:hover {
   background-color: #000000;
   transform: scale(0.8);
}

nav > a:hover {
   color: #fdff83;
}

footer {
   display: flex;
   flex-direction: column;
   gap: 30px;
   padding: 50px 4vw 20px 4vw;
   box-shadow: 0px 2px 8px #ffffff;
}

footer .grid {
   display: flex;
   flex-wrap: wrap;
   gap: 50px 30px;
   padding-bottom: 50px;
   border-bottom: 1px solid #d9d9d9;
   justify-content: space-between;
}

footer .grid div {
   min-width: 200px;
}

footer .grid > p {
   font-size: 1.6rem;
   text-transform: uppercase;
   letter-spacing: 0.2em;
}

footer .grid p > span,
h2 > span {
   font-size: inherit;
   color: #fdff83;
   font-weight: 500;
   letter-spacing: inherit;
}

section.light h2 > span {
   color: #b0b300;
}

main section:first-child {
   padding-top: 100px;
}

.light {
   background-color: #f7f7f7;
}

#hero-sec {
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding: 100px 60% 100px 5vw;
   background: url(files/main-banner.png) no-repeat;
   background-size: cover;
}

#hero-sec div > span {
   font-size: 1.4rem;
   color: #fdff83;
}

#hero-sec h4 {
   color: #ffffff;
   font-size: 1.2rem;
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.13em;
   text-shadow: 2px 1px 2px #000000;
}

#project-about p {
   margin-bottom: min(100px, 10vw);
}

#project-about img {
   padding-top: 30px;
   min-width: 200px;
}

#benefits-loc-div > div {
   display: flex;
   padding: 0px 20px;
}

#benefits-loc-div > div > i {
   width: 50px;
   height: 50px;
   align-self: center;
   align-content: center;
   text-align: center;
   margin-right: 10px;
   border: 2px solid #d9d9d9;
   border-radius: 50%;
}

#benefits-loc-div > div > p {
   font-weight: 500;
   text-transform: uppercase;
   font-size: 0.8rem;
   align-self: center;
}

/*Download Section*/
#download-div > a {
   font-size: 1.2rem;
   padding: 6px 20px 6px 6px;
   background-color: #343434;
   color: #d9d9d9;
   text-transform: capitalize;
   border: none;
   border-radius: 4px;
}

#download-div > a:hover {
   background: #000000;
   box-shadow: 0px 0px 10px 0px #ffffff;
   border-radius: 40px;
}

#download-div > a > i {
   background-color: #000000;
   color: #fdff83;
   padding: 6px 14px;
   margin-right: 12px;
   border-radius: 4px;
}

#download-sec p:nth-of-type(1) {
   font-size: 2rem;
}

#download-sec p:nth-of-type(2) {
   font-size: 1.4rem;
   margin-bottom: 30px;
}

#download-sec p:nth-of-type(3) {
   font-size: 2rem;
   text-transform: uppercase;
   font-weight: 500;
}

/*layout Section*/

#layouts-sec {
   background: url(files/floor-background.png);
   color: #343434;
}

#layouts-sec h3 {
   font-size: 1.2rem;
   margin-bottom: 5px;
}

#layouts-sec div:has(> h3) {
   background-color: #343434;
   padding: 5px 0px 10px 0px;
   flex: 1 1 300px;
}

#layouts-sec div:has(> h3) > div {
   background-color: #ffffff;
}

#layouts-sec div:has(> a) {
   background-color: #ffffff;
}

#gallery-layout {
   width: 400px;
   max-width: 90vw;
}

#gallery-layout .swiper-slide {
   display: flex;
   align-items: center;
   justify-content: center;
}

#gallery-layout img {
   max-width: 100%;
   max-height: 400px;
}

.swiper-button-next,
.swiper-button-prev {
   border: 1px solid #b0b300;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   color: #b0b300;
   font-size: 1.5rem;
   font-weight: bolder;
}

.swiper-button-next::after,
.swiper-button-prev::after {
   color: inherit;
   font-size: inherit;
   font-weight: inherit;
}

/*Invest Sec*/

#invest-sec > div {
   display: flex;
   margin-top: 100px;
   text-align: start;
   flex-wrap: wrap;
   row-gap: 30px;
}

#invest-sec > div > div {
   display: flex;
   flex-direction: column;
   gap: 5px;
   padding: 0px 20px;
   flex: 1 1 300px;
   justify-content: space-between;
}

#invest-sec > div > div:nth-child(2) {
   border-width: 0px 0px 0px 2px;
   border-color: #343434;
   border-style: solid;
}

#invest-sec h3 {
   font-size: 1.3rem;
   letter-spacing: 0.1em;
   font-weight: 500;
   margin-bottom: 30px;
}

#invest-sec > div > div > p {
   font-size: 0.95rem;
   margin-bottom: 10px;
}

#invest-sec .progress {
   background-color: #d9d9d9;
   min-height: 25px;
   width: 100%;
   border-radius: 2px;
   margin: 10px 0px 20px 0px;
   display: flex;
}

#invest-sec .progress > span {
   background-color: #343434;
   padding: 0px 20px 4px 10px;
   color: #fdff83;
   align-self: stretch;
   align-content: center;
}

.full-img {
   width: 100%;
   height: 600px;
   object-fit: cover;
}

/*Photo Gallery Sec*/
#gallery-image-div {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 20px;
   margin-top: 50px;
}

#gallery-image-div img {
   border-radius: 6px;
}

#gallery-image-div img:hover {
   box-shadow: 0px 0px 10px 5px #d9d9d9;
}

/*devloper-sec css*/
#devloper-sec {
   padding: 4vw 0px 5px 0px;
}

#devloper-sec > div {
   padding: 50px 8vw;
   display: flex;
   gap: 40px 50px;
   align-items: center;
}

#devloper-sec > div:nth-child(2n) {
   flex-direction: row-reverse;
}

#devloper-sec > div:nth-child(1n + 2) {
   background-color: #d9d9d9;
   color: #343434;
}

#devloper-sec > div:nth-child(1n + 2) > h2 {
   color: #343434;
   font-weight: 500;
   margin-top: 15px;
}

#devloper-sec > div > div:has(img) {
   min-width: 50%;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

#devloper-sec > div > div > div {
   flex-wrap: nowrap;
}

#devloper-sec img {
   object-fit: cover;
   max-height: 400px;
   width: 100%;
   border-radius: 12px;
}

#devloper-sec p {
   font-size: 1.1rem;
   letter-spacing: 0.06em;
}

#devloper-sec h2 {
   letter-spacing: 0.25em;
   font-size: 2.2rem;
}

/*Fixed Section css*/
#bottom-fixed {
   position: sticky;
   bottom: 0;
   padding: 10px 20px;
   display: flex;
   gap: 10px;
   justify-content: space-between;
   min-height: 50px;
   align-items: center;
   background: #000000eb;
   backdrop-filter: blur(1px);
   z-index: 10;
}

#bottom-fixed > h2 {
   font-size: 1rem;
   margin: 0px;
}

#bottom-fixed > p {
   font-size: 1.1rem;
   text-transform: capitalize;
   color: #ffffff;
   text-align: center;
}

#bottom-fixed > a {
   color: #000000;
   min-width: 50px;
   padding: 4px 20px;
   /*background: #d9d9d9;*/
   border: 1px solid #d9d9d9;
   box-shadow: 2px 2px 2px 1px #5e5e5e;
}

#contact-sec {
   background: url(files/background-contact.jpg);
}

#contact-sec a {
   font-size: 1.2rem;
   font-weight: 400;
   margin-bottom: 10px;
}

#contact-sec div {
   flex: 1;
}

#contact-sec div:last-child {
   max-width: min(450px, 100%);
}

/*Video Load Section*/
#video-load-sec {
   position: fixed;
   top: 0;
   left: 0;
   height: 100dvh;
   width: 100vw;
   background-color: #ffffff;
   padding: 0px;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 20;
}

#video-load-sec video {
   width: 100%;
   pointer-events: none;
}

/*Registration Section*/
#reg-sec > h3,
#kyc-sec > h3 {
   color: #343434;
   font-weight: 500;
   text-align: center;
   margin-bottom: 30px;
}

/*pop up Section*/
#pop-sec {
   height: 100dvh;
   width: 100vw;
   position: fixed;
   background: #00000030;
   backdrop-filter: blur(2px);
   display: none;
   justify-content: center;
   align-items: center;
   text-align: center;
   z-index: 10;
}

#pop-sec.active {
   display: flex;
}

#pop-sec > div {
   width: min(450px, 100%);
   position: relative;
   background: #16161673;
   padding: 4vw;
   margin: 20px;
   border-radius: 12px;
   box-shadow: 0px 0px 10px 0px #a5a5a5;
   display: flex;
   flex-direction: column;
   animation: grow 1.5s ease-in-out;
}