::placeholder { 
    color: var(#D2005A);
    opacity: 1;
}
:-ms-input-placeholder {
    color: var(#D2005A);
}
::-ms-input-placeholder {
    color: var(#D2005A);
}
:root{
    --grassMain: #B6CC4D;

    --greenMain : #7BCCB2;
    --greenTan : #75BCA5;
    --greenDark : #14807B;

    --yellowDark : #FFDC5B;
    --yellowLight : #F6E562;
    --yellowTan : #837234;

    --navyText : #4A54A0;
    --navyMain : #443286;
    --navyDark : #231458;
    --navyExtraDark : #102541;

    --skyMain : #AFE2FF;
    --skyDark : #94CFF0;

    --skyLightest : #94CFF0;
    --seaLight : #45C0DB;
    --seaDark : #13759B;
    --seaText : #00A0C5;

    --pinkDark : #D2005A;

    --redLight : #FF5261;
    --redMain : #EA4B59;
    --redDark : #982D36;

    --blueMain : #5D4CE0;
    --blueDark : #291B98;

    --purpleLight: #A14BEA;
    --PurpleDark : #661FA2;
}

    .navbar{
        position: fixed;
        top: 0;
        min-width: 100%;
        z-index: 999;
    }
    .nav-link{
        font-weight: 600;
        font-family: 'Jost', sans-serif;
        font-size: 18px;
        color: var(--greenDark);
    }
    .navbar-nav .nav-item img{
        position: relative;
        width: 200px;
        top: -10px;
    }


    section{
        min-height: 82vh;
        width: 100%;
        overflow: hidden;
        font-family: 'Jost', sans-serif;
    }

    /* ===== Hero Section ===== */
    .hero{
        background-color: var(--greenMain);
        display: flex;
        align-items: flex-end;
    }
    .hero h1{
        font-size: 5rem;
        color: white;
        font-family: 'Jost', sans-serif;
    }
    .hero h6{
        font-size: 1.5rem;
        color: white;
    }
    .hero .para-box{
        padding: 50px;
        border-left: 2px solid var(--yellowDark);
    }
    .hero .para-box p{
        color: var(--greenDark);
        font-size: 1.2rem;
    }
    @media(max-width:600px) {
        .hero h1 {
            font-size: 5rem;
        }
        .hero h6 {
            font-size: 1.2rem;
        }
        .hero .para-box {
            padding: 30px;
        }
    }



    /* ===== About Section ===== */
    .about{
        background-color: var(--yellowDark);
    }
    .about .side{
        min-height: 25vh;
        background: white;
        border-radius: 0 300px 300px 0;
        display: flex;
        align-items: center;
    }
    .about .side .title{
        color: var(--seaText);
        font-size: 1.5rem;
        padding-left: 5rem;
    }
    .about .side.side-1{
        width: 60%;
        transition: all 500ms;
    }
    .about .side.side-2{
        width: 80%;
        transition: all 500ms;
    }
    .about .side.side-1:hover, .about .side.side-2:hover{
        width: 100%;
        transition: all 500ms;
    } 
    .about .side.side-3{
        width: 100%;
        transition: all 600ms;
    }
    .about .side.side-3:hover{
        width: 120%;
        transition: all 600ms;
    }
    .about .para{
        font-family: 'Jost', sans-serif;
        padding-right: 30px;
        text-align: justify;
        font-size: 24px;
        margin: 0;
    }
    .about h3{
        color: var(--seaText);
    }
    .about h3 span{
        color: var(--navyMain);
    }
    .about .btn-card{
        aspect-ratio: 1/1;
        background: var(--navyDark);
        border: 3px solid var(--purpleLight);
        border-radius: 50%;
        display: flex;
        text-align: center;
        justify-content: center;
        font-size: 4rem;
        overflow: hidden;
        transition: all 500ms;
    }
    .about .btn-card:hover{
        border: 10px solid var(--purpleLight);
        transition: all 300ms;
    }
    .about .btn-card i{
        position: relative;
        top: 5px;
    }
    @media(max-width:600px) {
        .about .side .title {
            color: var(--seaText);
            font-size: 3rem;
            padding-left: 1rem;
        }
        .about .side {
            min-height: 15vh;
        }
        .about .side.side-3 {
            width: 95%;
        }
    }


    /* ===== Form-sec ===== */
    .form-sec{
        background: #ffffff;
        min-height: 120vh;
    }

    .form-sec .side{
        background-color: var(--skyDark);
        border-radius: 0 600px 600px 0;
        padding: 0 130px 0 90px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .form-sec .side2{
        background-color: var(--skyDark);
        border-radius: 600px 0 0 600px;
        padding: 0 130px 0 90px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .form-sec .side .indicator-btn button{
        min-width: 30%;
    }
    .form-sec .side .title h1{
        font-size: 3rem;
        color: var(--navyExtraDark);
    }
    .form-sec .side p{
        font-size: 1.4rem;
        margin: 0;
        margin-top: 2rem;
    }
    .form-sec .form-group{
        margin-bottom: 3rem;
    }
    .form-sec .form-control{
        background: transparent;
        outline: none;
        border: none;
        border-bottom: 2px solid gray;
        border-radius: 0;
        padding: 10px;
        color: var(--pinkDark);
        font-family: 'Jost', sans-serif;
    }
    .form-control:active, .form-control:focus{
        box-shadow: none;
        outline: none;
    }
    .form-sec .indicators{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .form-sec .indicators .circle, .form-sec .indicators .circle-filled{
        aspect-ratio: 1/1;
        border-radius: 50%;
        height: 0.7rem;
        background-color: var(--pinkDark);
        border: 3px solid var(--pinkDark);
        margin: 3rem 0.5rem 0;
    }
    .form-sec .indicators .circle{
        background: transparent;
    }
    .form-sec .btn-light, .form-sec .btn-outline-light{
        color: var(--navyExtraDark) !important;
    }
    .form-sec .btn-outline-primary{
        min-height: 10vh;
        border-color: var(--purpleLight);
        border-width: 5px;
    }
    .form-sec .btn-outline-primary:hover{
        box-shadow: 0px 29px 33px -19px black;
    }
    .form-sec .btn-success{
        background: var(--grassMain);
        color: white;
        border: none;
    }
    .form-sec p.text-primary {
        color: var(--navyExtraDark) !important;
    }
    .form-sec .side .fig{
        width: 80%;
    }
    .form-sec .side hr{
        border-bottom: 2px solid white;
        opacity: 1;
    }

    .form-sec .side .count{
        color: var(--PurpleDark);
        font-family: 'Bebas Neue', cursive;
        font-size: 4rem;
        text-align: center;
        padding: 20px 0;
    }

    .form-sec .sel-card{
        background: var(--redMain);
        transition: all 500ms;
    }
    .form-sec .colHvr{
        padding: 10px;
        outline: 2px solid transparent;
        border: 10px solid transparent;
    }
    .form-sec .colHvr:hover{
        outline: 2px solid white;
        border: 10px solid #94cff0;
        border-radius: 300px;
    }
    .form-sec .colHvr:hover .sel-card{
        box-shadow: -2px -40px 0px -12px var(--redDark);
        transition: all 500ms;
    }
    .form-sec .colHvr.active{
        outline: 2px solid white;
        border: 10px solid #94cff0;
        border-radius: 300px;
    }
    .form-sec .colHvr.active .sel-card{
        box-shadow: -2px -40px 0px -12px var(--redDark);
        transition: all 500ms;
    }
    .form-sec .colHvr.active .sel-card.card-2{
        box-shadow: -2px -40px 0px -12px var(--blueDark);
        transition: all 500ms;
    }
    .form-sec .colHvr.active .sel-card.card-3{
        box-shadow: -2px -40px 0px -12px var(--PurpleDark);
        transition: all 500ms;
    }
    .form-sec .sel-card .icon{
        aspect-ratio: 1/1;
        background: var(--redDark);
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        outline: none;
    }

    @media(max-width:600px){
        .form-sec .side {
            padding: 0 50px 0 30px;
        }
        .form-sec .side p{
            font-size: 1rem;
        }
        .form-sec .side .title h1{
            font-size: 3rem;
        }
        .form-sec .side{
            min-height: 60vh;
        }
    }

    .form-sec .sel-card.card-2{
        background: var(--blueMain);
    }
    .form-sec .sel-card.card-2:hover{
        box-shadow: -2px -40px 0px -12px var(--blueDark);
    }
    .form-sec .sel-card .icon.icon-2{
        background: var(--blueDark);
    }
    .form-sec .sel-card.card-3{
        background: var(--purpleLight);
    }
    .form-sec .sel-card.card-3:hover{
        box-shadow: -2px -40px 0px -12px var(--PurpleDark);
    }
    .form-sec .sel-card .icon.icon-3{
        background: var(--PurpleDark);
    }


    /* ===== Footer ===== */
    footer{
        font-size: 80%;
        color: gray;
        font-family: 'Jost', sans-serif;
    }
    footer ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    footer ul li{
        display: inline;
        margin: 0 10px;
    }
    footer ul li a{
        color: var(--navyMain);
        font-size: 1rem;
    }


    /* ===== waiting ===== */
    .waiting{
        background-color: var(--greenTan);
    }
    .waiting span{
        color:var(--navyMain);
    }
    .waiting .timer-block{
        margin-top: 25vh;
    }
    .waiting h1.timer{
        font-family: 'Bebas Neue', cursive;
        font-size: 6rem !important;
        color:var(--navyMain);
    }
    .waiting hr{
        border: 1px solid white;
        opacity: 1;
    }


    /*===== therapy =====*/
    .therapy{
        background: white;
        min-height: 94vh;
    }
    .therapy .outer-card{
        aspect-ratio: 1/1;
        border-radius: 50%;
        border: 7px solid var(--yellowDark);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Bebas Neue', cursive;
    }
    .therapy .outer-card h1{
        font-size: 6rem;
        color: var(--navyMain);
    }
    .therapy h3.breath-text{
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--greenDark);
    }
    .therapy .card-meditate{
        animation-name: meditation;
        box-shadow: none;
        animation-duration: 120s;
        animation-timing-function: ease;
    }
    @keyframes meditation {
        0%   {box-shadow: 0 0 0px 0px var(--yellowLight), inset 0 0 0px 0px var(--yellowLight);}
        100% {box-shadow: 0 0 200px 50px var(--yellowLight), inset 0 0 20px 5px var(--yellowLight);;}
    }
    .therapy .card-breath{
        animation-name: breathing;
        box-shadow: none;
        animation-duration: 8s;
        animation-iteration-count: infinite;
        animation-timing-function: ease;
    }
    @keyframes breathing {
        0%   {outline: 0px solid var(--skyLightest)}
        50%  {outline: 40px solid var(--skyLightest)}
        100% {outline: 0px solid var(--skyLightest)}
    }
    .therapy img{
        height: 5rem;
    }


    /*===== Congrats =====*/
    .congrats{
        background: var(--greenMain);
    }
    .congrats p{
        color: var(--navyDark);
        font-size: 1.5rem;
        margin-top: 30px;
    }

    .congrats .btn-primary{
        min-height: 10vh;
        border-color: var(--purpleLight);
        border-width: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .congrats .btn-primary:hover{
        box-shadow: 0px 29px 33px -19px black;
        background-color: var(--navyDark);
    }


    /*===== Certificate =====*/
    .certificate{
        background-color: var(--greenMain);
    }
    .certificate .text-down{
        color: var(--yellowLight);
    }
    .certificate .text-down i{
        color: var(--greenDark);
        font-size: 2rem;
    }

    /*===== Time Bank =====*/
    .time-bank{
        background-color: var(--yellowDark);
    }
    .time-bank .time-text{
        font-size: 6rem;
        font-family: 'Bebas Neue', cursive;
        color: var(--navyDark);
    }
    .time-bank .time-text-content{
        font-size: 2rem;
    }
    .time-bank .info-card{
        background-color: var(--redLight);
        color: var(--yellowDark);
        border-radius: 15px;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .time-bank .info-card p{
        position: relative;
        top: 5px;
    }
    .time-bank .info-card span{
        color: white;
        font-family: 'Bebas Neue', cursive;
        font-size: 2rem;
        display: inline;
        position: relative;
        top: 5px;
    }
    .time-bank .bottom-div{
        border-radius: 5rem 5rem 0 0;
        background: var(--skyMain);
        min-height: 50vh;
    }
    .time-bank .bottom-div .share-para{
        color: var(--PurpleDark);
        font-size: 1.2rem;
    }


.text-blue{
    color: #091562;
}