:root {
    --uniFontColor: rgb(0, 0, 0);
    --UniWhiteColor: white;
    --navLinkFontClr: rgb(0, 0, 0);
    --navLinkHoverBG: rgb(212, 212, 212);
    --contentCardsBG: #ab4cff;
    --wlcmBoxShado: rgba(90, 29, 116, 0.21);
    --miniHeadingFSize: 1.5rem;
    --navLinkFontSze: 1rem;
    --wlcmttxtfontsize: 1.7rem;
    --socialCrdWid: 4rem;
    --queInWid: 25rem;
    --buyStpImgWid: 12rem;
    --ImpThngImgWid: 10rem;
    --WIInivrexImgWid: 8rem;
    --ofrClckImgWid: 2rem;
    --navBrnTxtImgWid: 8rem;
    --byStpContFntSize: 5rem;
    --navBrnblbImgWid: 3rem;
    --PrimaryBG: Whitesmoke;
    --SecondaryBG: white;
    --TertiaryBG: #c3c3c398;
    --QuadBG: #dbdbdb;
    --fontsizeSmlTnOtr: 0.1rem;
    --SimiMiniHeadings: 1.1rem;
}

* {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

.highLighter {
    border: 2px solid red;
}

/* Text Content and details about page  */
#pageDet {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 1rem;

}

#pageDet>p:nth-child(1) {
    width: 100%;
}

.headText {
    margin-top: 1rem;
}

.contentText {
    width: 95%;
    max-width: 60rem;
    text-align: justify;
}

.whyNeed>li {
    list-style-position: inside;
}

.instru>li {
    list-style: decimal;
    list-style-position: inside;
}

/* Plans Section Starts Here  */
#plansSectionPrnt {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#plansSectionPrnt>div {
    background-color: rgba(157, 174, 4, 0.127);
    width: 15rem;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0.7rem;
    padding: 0.6rem;
    padding-top: 0.9rem;
    border-radius: 5px;
    border: 1px solid green;
    box-shadow: -10px 10px 10px 0px rgba(0, 0, 0, 0.124);
}

#plansSectionPrnt>div:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.CheckBoxPlns {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid green;
    background-color: white;
    border-radius: 100%;
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 0.7rem;
    left: 1rem;
}
.insideChcBox{
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 100%;
    margin: auto;
}
.prcebox {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 1.2rem;
    background-color: rgba(255, 255, 255, 0.319);
    padding: 0.4rem;
    width: 90%;
    border-radius: 5px;
}

.prcebox>p:nth-child(1) {
    margin-bottom: 0.08rem;
}

.priceShowright {
    font-size: calc(var(--navLinkFontSze) + 70%);
    color: #a23636;
}

.detailsPlanstxt {
    margin-top: 0.6rem;
}

.txtInforPlan {
    margin: 0.3rem auto;
    display: flex;
    align-items: center;
}

.planBtn {
    padding: 0.6rem 1rem;
    background-color: #a23636;
    text-decoration: none;
    color: var(--UniWhiteColor);
    font-weight: bold;
    border-radius: 5px;
    margin-top: 1rem;
}

.planBtn:hover {
    background-color: #6e2222;
}

/* Form Section  */
/* Universal Classes Here  */
.InputOptionstext {
    font: caption;
    font-size: var(--navLinkFontSze);
    color: var(--uniFontColor);
    border: none;
    outline: none;
}

/* Predefined Classes */
.ErrSwrClss {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: auto;
    background-color: rgb(255, 7, 7);
    font: caption;
    font-size: var(--navLinkFontSze);
    color: var(--UniWhiteColor);
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    z-index: 40;
    right: -2%;
    top: -2%;
    animation: blinkAni 0.4s 0s infinite ease-in-out both alternate;
}

@keyframes blinkAni {
    from {
        opacity: 0.6;
    }

    to {
        opacity: 1;
    }
}


/* Form Section Here  */

#formCusOrderWebpage {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#formCusOrderWebpage>div {
    margin: 1rem;
}

/* Personal Details Section here  */
#formCusOrderWebpage>div:nth-child(1) {
    background-color: transparent;
    width: 100%;
    max-width: 30rem;
    padding: 1rem;
    height: auto;
    margin-bottom: auto;
}

#formCusOrderWebpage>div:nth-child(1)>p {
    font: caption;
    font-size: var(--navLinkFontSze);
}

#formCusOrderWebpage>div:nth-child(1)>div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: auto;
    height: auto;
}

#formCusOrderWebpage>div:nth-child(1)>div>div {
    width: 100%;
    height: auto;
    display: flex;
    padding: 0;
    margin: 0;
}

#formCusOrderWebpage>div:nth-child(1)>div>div>input {
    outline: none;
    border: 2px solid black;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    margin: 0.5rem auto;
    width: 100%;
}

#formCusOrderWebpage>div:nth-child(1)>div>div:nth-child(5) {
    border: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

#formCusOrderWebpage>div:nth-child(1)>div>div>textarea {
    outline: none;
    border: 2px solid black;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    margin: 0.5rem auto;
    width: 100%;
    resize: none;
}

#formCusOrderWebpage>div:nth-child(1)>div>div:nth-child(4)>div {
    display: flex;
    align-items: center;
    outline: none;
    border: 2px solid black;
    border-radius: 10px;
    margin: 0.5rem auto;
    width: 100%;
    padding: 0 1rem;
}

#formCusOrderWebpage>div:nth-child(1)>div>div:nth-child(6)>div {
    display: flex;
    align-items: center;
    outline: none;
    border: 2px solid black;
    border-radius: 10px;
    margin: 0.5rem auto;
    width: 100%;
    padding: 0 1rem;
}

#formCusOrderWebpage>div:nth-child(1)>div>div>div>input {
    background-color: transparent;
    padding: 0.5rem 0.2rem;
    width: 90%;
    height: 100%;
    margin-left: 0.2rem;
    border: none;
    outline: none;
}

#formCusOrderWebpage>div:nth-child(1)>div>div>div>input::placeholder {
    font: caption;
    opacity: 1;
    color: var(--uniFontColor);
    font-size: var(--navLinkFontSze);
}

#formCusOrderWebpage>div:nth-child(1)>div>div>textarea::placeholder {
    font: caption;
    opacity: 1;
    color: var(--uniFontColor);
    font-size: var(--navLinkFontSze);
}

#formCusOrderWebpage>div:nth-child(1)>div>div>input::placeholder {
    font: caption;
    opacity: 1;
    color: var(--uniFontColor);
    font-size: var(--navLinkFontSze);
}

/* Custom Plans Section Here  */
#formCusOrderWebpage>div:nth-child(2) {
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: white;
    padding: 1rem;
    max-width: 60rem;
    height: auto;
}

#formCusOrderWebpage>div:nth-child(2)>p {
    font: caption;
    font-size: var(--navLinkFontSze);
    color: var(--uniFontColor);
    padding-left: 0.6rem;
    margin-bottom: 1rem;
}

#formCusOrderWebpage>div:nth-child(2)>div {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}


/* When user focus inputs for form  */
.UserInCls {
    background-color: transparent;
}

.UserInCls:focus {
    background-color: var(--SecondaryBG);
}


/* Options Section Here  */

.OptinosBox {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0.6rem;
    flex-wrap: wrap;
}

.OptinosBox>p {
    font: caption;
    font-size: var(--navLinkFontSze);
    color: var(--uniFontColor);
    width: 100%;
    font-weight: 600;
    margin-right: 0.3rem;
    margin-bottom: 0.4rem;
}

.OptinosBox>div {
    display: flex;
    width: auto;
    flex-wrap: wrap;
}

.OptinosBox>div>div {
    background-color: transparent;
    height: 2.5rem;
    width: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 100%;
    margin: auto 0.3rem;
    font: caption;
    font-size: var(--navLinkFontSze);
    color: var(--uniFontColor);
    cursor: pointer;
    margin: 0.2rem;
}

.OptinosBoxWithInput {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0.6rem;
    flex-wrap: wrap;
}

.OptinosBoxWithInput>p {
    font: caption;
    font-size: var(--navLinkFontSze);
    color: var(--uniFontColor);
    width: 100%;
    font-weight: 600;
    margin-right: 0.3rem;
    margin-bottom: 0.4rem;
}

.OptinosBoxWithInput>div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
}

.OptinosBoxWithInput>div>input {
    outline: none;
    border: 2px solid var(--QuadBG);
    border-radius: 10px;
    padding: 0.2rem 0.4rem;
    font: caption;
    font-size: var(--navLinkFontSze);
    color: var(--uniFontColor);
    width: 8rem;
}

.OptinosBoxWithInput>div>div:nth-child(2) {
    background-color: transparent;
    width: auto;
    padding: 0.5rem;
    border-radius: 1rem;
    font: caption;
    font-size: var(--navLinkFontSze);
    color: var(--uniFontColor);
    cursor: pointer;
    font-weight: 600;
}

#OptTxtContent {
    display: flex;
    align-content: center;
}

#estPrice {
    text-decoration: line-through;
}

/* Submit Button Section  */

#CusWebPageFormSub {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    background-color: var(--QuadBG);
    font: caption;
    font-size: var(--navLinkFontSze);
    color: var(--uniFontColor);
    padding: 1rem;
    outline: none;
    border: none;
    margin: auto;
    cursor: pointer;
    border-radius: 10px;
}

#CusWebPageFormSub:hover {
    background-color: var(--TertiaryBG);
}

/* Instruction Section Here  */
#instrSec {
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 65rem;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--SecondaryBG);
    margin: auto;
    margin-bottom: 1rem;
    padding: 1rem;
    flex-direction: column;
}

#instrSec>ul>li {
    list-style-position: inside;
    margin: 0.3rem 0;
}


#ThnkSubCusOrder {
    display: none;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100%;
    left: 0;
    background-color: rgba(139, 139, 139, 0.097);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    overflow: hidden;
    z-index: 16;
    padding: 1rem;
    text-align: center;
}

#formParent {
    width: 100%;

}

#AfterSubWin {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--SecondaryBG);
    width: 90%;
    padding: 1rem;
    max-width: 65rem;

}

#AfterSubWin>div:nth-child(1) {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

#AfterSubWin>div:nth-child(1)>p {
    margin: 0.3rem 0;
}

#AfterSubWin>div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin-top: 1rem;
}

#reCaptc {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

#AfterSubWin>div>button {
    background-color: var(--QuadBG);
    width: auto;
    padding: 1rem;
    outline: none;
    border: none;
    border-radius: 10px;
    margin: auto 0.5rem;
    cursor: pointer;
}

#AfterSubWin>div>button:hover {
    background-color: var(--TertiaryBG);
}

/* Styling Starts here for dialogue Box and prompt  */
#dialogueBoxPrnt {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 0;
    transition: 0.3s;
    /* Ensure it is on top of other elements */
}

/* Defined CLass to hide scrollbar  */
body.no-scroll {
    overflow: hidden;
}

.DiaTextAllSize {
    font: caption;
    font-size: 1rem;
    color: black;

}

#mainWindDialo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: auto;
    transition: 0.3s;
    max-width: auto;
    height: auto;
    padding: 1rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.441);
    opacity: 0;
    transform: scale(0.8);
    margin: 0 2rem;
}

#Dialoguetext {
    margin-bottom: 1rem;
    user-select: none;
    width: 100%;
    text-align: left;
}

.DiaBtns {
    outline: none;
    border: none;
    padding: 0.4rem 0.6rem;
    border-radius: 5px;
    /* border: 2px solid #0000002c; */
    background-color: rgba(198, 198, 198, 0.183);
    cursor: pointer;
    text-align: left;
    margin: 0rem 0.3rem;
    user-select: none;
}

#mainWindDialo>div {
    margin-left: auto;
}

/* WIndos After SUb  */
#AFterSub {
    display: none;
}

#WindAfterSub {
    display: flex;
    justify-content: center;
    align-items: center;
    font: caption;
    font-size: var(--navLinkFontSze);
    flex-wrap: wrap;
    flex-direction: column;
}

#WindAfterSub>div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    margin-top: 1rem;
}

.AfterSubBtn {
    background-color: white;
    border: none;
    outline: none;
    padding: 0.4rem 0.6rem;
    border-radius: 5px;
    margin: 0 0.4rem;
}


#ThnkSubCusOrder {
    display: none;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100%;
    left: 0;
    background-color: rgba(139, 139, 139, 0.097);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    overflow: hidden;
    z-index: 16;
    padding: 1rem;
    text-align: center;
}

footer {
    margin-top: 20vh;
}