:root {
   --color-white: #ffffff;
   --color-nBlue: #1e293b;
   --color-link: #3c88f5;
   --color-hover-link: blue;
   --color-light-text: #4c4c4c;
   --bg-color-1: #fadac3;
   --bg-color-2: #d50505;
   --bg-color-3: #fff5bf;
   --bg-color-4: #1e293b;
   --bg-color-5: #ffdfdf;
   --bg-color-6: #ffffff;
   --bg-color-7: #c7f0d0;
   --bg-color-8: #fff4e0;
   --bg-btn: #c82333;
   --pad-4: 15px 5vw;
   --pad-3: 5px 5vw;
   --pad-2: max(2vw, 20px);
   --pad-1: 20px;
   --pad-btn: 4px 20px;
   --redius-1: 15px;
   --redius-2: 2vw;
   --redius-3: 6px;
   --nav-font-s1: 0.9rem;
   --nav-font-s2: 0.8rem;
   --nav-font-s3: 0.7rem;
   --font-size-1: 24px;
   --font-size-2: 2rem;
   --font-size-3: 20px;
   --margin-bottom20: 20px;
   --margin-bottom30: 30px;
   --margin-top-1: 12px;
   --border-1: 1px solid #000000;
   --border-2: 2px solid #c82333;
   --table-border: 1px solid #e2e8f0;
   --table-padding: 0.9em 1.1em;
   --table-font-size: min(2.6vw, 14px);
   --line-height-1: 1.6em;
}

* {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   font-size: 16px;
   color: #212429;
   font-family: sans-serif;
   letter-spacing: 0.5px;
   transition: all 0.4s ease-in-out;
}

body {
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

@keyframes bounse {
   0% {
      transform: scale(90%);
   }

   50% {
      transform: scale(100%);
   }

   100% {
      transform: scale(90%);
   }
}

@keyframes blink {
   0% {
      opacity: 100%;
   }

   50% {
      opacity: 0%;
   }

   100% {
      opacity: 100%;
   }
}

.blink {
   animation: 1s blink infinite ease-in;
}

.bounse {
   animation: 1.4s bounse infinite ease-in;
}

section {
   padding: var(--pad-2);
   border-radius: var(--redius-2);
}

h1 {
   font-size: var(--font-size-1);
   text-align: center;
   font-weight: 600;
   text-transform: capitalize;
   margin-bottom: var(--margin-bottom30);
}

h2 {
   font-size: var(--font-size-1);
   font-weight: 600;
   margin-bottom: var(--margin-bottom20);
}

h3 {
   font-size: var(--font-size-1);
   font-weight: 600;
   margin-bottom: var(--margin-bottom20);
}

h4 {
   font-size: var(--font-size-1);
   margin-bottom: var(--margin-bottom20);
}

h5 {
   color: var(--color-nBlue);
   font-size: var(--font-size-3);
   margin-bottom: var(--margin-bottom20);
   margin-top: var(--margin-top-1);
}

p {
   font-size: inherit;
   color: inherit;
   line-height: var(--line-height-1);
}

img {
   max-width: 100%;
}

i {
   font-style: normal;
   margin-right: 10px;
   color: inherit;
   align-self: center;
   min-width: 20px;
}

a {
   text-decoration: none;
   color: inherit;
   font-size: inherit;
}

marquee {
   color: var(--bg-color-6);
   padding: var(--pad-btn);
}

#marquee-div {
   background-color: var(--bg-color-2);
}

main {
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding: 20px 4vw 6vw 4vw;
   overflow: auto;
}

main.blog h1 {
   text-align: start;
   margin-bottom: 30px;
}

main.blog p {
   margin-bottom: var(--margin-bottom20);
}

main.blog {
   padding: 4vw 8vw;
}

a.btn1,
button {
   background-color: var(--bg-btn);
   padding: var(--pad-btn);
   color: var(--color-white) !important;
   border-radius: var(--redius-3);
   border: var(--border-1);
   appearance: auto;
   text-align: center;
   cursor: pointer;
   font-size: inherit;
   min-width: 100px;
}

a.btn1:hover,
button:hover {
   background-color: var(--bg-color-2);
}

ul {
   padding-left: min(8vw, 50px);
   line-height: var(--line-height-1);
}

form {
   flex: 1;
   display: flex;
   flex-direction: column;
}

form div:has(>div){
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 0px 10px;
}

input[type='text'],
input[type='file'],
input[type='date'],
input[type='number'],
input[type='email'],
textarea {
   min-height: 40px;
   padding: 10px;
   border-radius: 4px;
   outline: 1px solid #c3c3c3;
   border: none;
   width: 100%;
   min-width: 150px;
   margin-bottom: 4px;
}

div:has(> input) {
   flex: 1;
   margin-bottom: 4px;
}

label {
   display: inline-block;
   padding: 0px 10px 0px 0px;
   margin-bottom: 5px;
}

.active{
   display: flex !important;
}

.error {
   color: red;
   font-size: 0.9rem;
}

#enquiry-form button {
   align-self: flex-start;
}

/*Registration form start*/
#register-main {
   padding: 4vw 10vw 8vw 10vw;
}

/* #register-main h1 {
   text-align: center;
} */

#regForm {
   display: grid;
   grid-template-columns: 1.1fr 2fr;
   gap: 10px 0px;
}

/* #regForm > div:nth-child(odd) {
   padding-top: 12px;
} */

/* #regForm > div:nth-child(even):has(label) {
   padding-top: 0.8em;
} */

/* #regForm > div > div:has(div),
#popUp-form > div:has(div) {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0px 10px;
} */

/* #regForm label {
   display: inline-block;
   padding: 0px 10px 0px 0px;
} */

#regForm button {
   grid-column: 2;
}

#select-size-div > label {
   margin: 0px 10px 10px 0px;
   background-color: #ffffff;
   padding: 6px 10px;
   border-radius: 4px;
   border: 1px solid #000000;
}

@media screen and (max-width: 750px) {
   #register-main {
      padding: 4vw 4vw 8vw 4vw;
   }

   #regForm {
      display: flex;
      gap: 0px;
   }

   /* form button {
      align-self: center;
   } */
}

/*Registration form end*/

/*KYC form start*/
/* #kyc-main h1 {
   text-align: center;
   margin-bottom: 30px;
} */

/* #kycForm button {
   align-self: center;
} */

@media screen and (min-width: 1100px) {
   #kycForm div:has(div) {
      display: flex;
      gap: 20px;
   }

   #kyc-main {
      padding: 5vw 20vw;
   }
}
/*KYC form end*/

/*Pop up Form Start*/
/* #close-btn {
   float: right;
   font-size: 2.2rem;
   line-height: 1.8rem;
   cursor: pointer;
   transform: rotate(45deg);
}

#popUp-div {
   display: none;
   height: 100dvh;
   width: 100vw;
   position: fixed;
   background-color: #00000099;
   align-items: center;
   justify-content: center;
   z-index: 10;
   padding: 20px;
   top: 0;
   transition: all 0.3s ease-in;
}

#popUp-div > div {
   padding: 20px;
   border-radius: 6px;
   background-color: #ffffff;
   width: min(500px, 100%);
} */

/* #popUp-form button {
   align-self: center;
} */
/*Pop up Form End*/

input:focus {
   outline: var(--border-2);
}

input[type='radio']:focus,
input[type='checkbox']:focus {
   outline: none;
}

table {
   border-collapse: collapse;
   width: 100%;
   min-width: max-content;
}

div:has(>table){
   overflow: auto;
}

th,
td {
   border: var(--table-border);
   padding: var(--table-padding);
   font-size: min(2.6vw, 14px);
   text-align: start;
}

.mb1 {
   margin-bottom: 10px;
}
.mb2 {
   margin-bottom: 20px;
}
.mb3 {
   margin-bottom: 30px;
}
.mb5 {
   margin-bottom: 50px;
}

form button {
   align-self: center;
   justify-self: flex-start;
   padding: 8px 40px;
   margin-top: var(--margin-bottom20);
}

main#thanks div{
   display: flex;
   flex-direction: column;
   gap: 5px;
   align-items: center;
   text-align: center;
   text-transform: capitalize;
}

/* #thanks-text {
   font-size: var(--font-size-2);
   font-weight: 600;
   margin-bottom: 50px;
   text-align: center;
}

#count-down {
   color: var(--bg-btn);
   font-size: 1.1rem;
   text-align: center;
} */

#web-logo {
   max-width: min(550px, 100%);
}

#header-div {
   background-color: var(--bg-color-1);
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: space-between;
   padding: var(--pad-4);
   align-items: center;
}

#header-div > div {
   display: flex;
   flex-direction: column;
   text-align: end;
   font-weight: 600;
   gap: 5px;
   color: var(--color-light-text);
}

#header-div nav {
   font-size: var(--nav-font-s2);
   display: flex;
   justify-content: flex-end;
   gap: 20px;
   color: inherit;
}

#header-div p > a {
   font-size: var(--nav-font-s1);
   display: inline-block;
}

footer nav {
   background-color: var(--bg-color-2);
   padding: var(--pad-3);
   display: flex;
   gap: 10px 20px;
   color: var(--color-white);
   font-size: var(--nav-font-s2);
   justify-content: center;
   flex-wrap: wrap;
}

footer div {
   background-color: var(--bg-color-4);
   font-size: var(--nav-font-s3);
   color: var(--color-white);
   padding: var(--pad-4);
   text-align: center;
}

/*UnitsPage*/
#select-unit-div p{
   text-align: center;
}

p#viewLayout{
   margin-bottom: 10px;
    border-radius: 6px;
    padding: 4px 20px;
    color: var(--bg-btn);
    justify-self: center;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
}

#layout-div{
   display: none;
   flex-direction: column;
   gap: 40px;
   position: fixed;
   background-color: #00000078;
   width: 100vw;
   left: 0;
   top: 0;
   height: 100vh;
   padding: 10px;
   align-items: center;
   justify-content: center;
}

#layout-div .close-btn{
   margin: 0px;
   color: #ffffff;
   background: #d50505;
   border: 1px solid;
   width: 40px;
   height: 40px;
   font-size: 1.4rem;
   text-align: center;
   align-content: center;
   border-radius: 50%;
   cursor: pointer;
}

#layout-div .close-btn:hover{
   background-color: var(--bg-color-4);
   transform: scale(1.1);
}

#select-unit-div table{
   button.sold, button.hold{
      background-color: transparent;
      color: var(--color-light-text) !important;
   }
}