@font-face {
    font-family: style;
    src: url(./assets/LuxuriousScript-Regular.ttf);
}

@font-face {
    font-family: exp;
    src: url(./assets/Explora-Regular.ttf);
}

@font-face {
    font-family: montserrat;
    src: url(./assets/Montserrat-VariableFont_wght.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #FBFFFD;
}

#main {
    width: 100vw;
    height: 320vh;
    /* background-color: #FBFFFD; */
    background-color: #FBFFFD;
    position: relative;
    opacity: 1;


}

#load {
    width: 24.5vw;
    height: 25vh;
    background-color: #00A084;
    border-radius: 1vw;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
    rotate: 0deg;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
}

#load-white {
    width: 1vw;
    height: 1vh;
    background-color: #ffffff;
    position: absolute;
    z-index: 7;
    top: 50%;
    left: 50%;
    display: none;
    transform: translate(-50%, -50%);
    opacity: 1;

}

.txt {
    width: fit-content;
    height: fit-content;
    font-family: gilroy;
    font-size: 2.5vw;
    color: #fff;
    position: absolute;


}

.txt h3 {
    font-weight: 500;
}

.ld-up-txt {
    width: 23vw;
    height: 5vh;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: montserrat;
    font-size: 1.3vw;
    position: absolute;
    z-index: 4;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.ld-up-txt h3 {
    font-weight: 430;
}

.drk {
    font-weight: 600;
}

#comma {
    color: #00A084;
}

.ld-dw-txt {
    width: 23vw;
    height: 5vh;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: montserrat;
    font-size: 1.25vw;
    position: absolute;
    z-index: 4;
    top: 64%;
    left: 50%;
    transform: translate(-50%, 0%);

}

.ld-dw-txt h3 {
    font-weight: 430;
}

#pointer {
    width: 12px;
    height: 12px;
    background-color: #00A084;
    position: absolute;
    border-radius: 50%;
    z-index: 20;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

#nav {
    width: 100%;
    height: 8vh;
    background-color: #C2E9E7;
    opacity: 0;
    display: flex;
    position: relative;
    gap: 2px;
    margin-bottom: 2px;
    cursor: pointer;
}

.left {
    width: 37%;
    height: 100%;
    /* opacity: 0; */
    display: flex;
    gap: 3px;

    align-items: center;
}

.middle {
    width: 23%;
    height: 100%;
    /* opacity: 0; */
    border-radius: 0.7vw;

    background-color: #FBFFFD;

}

.right {

    width: 9.9%;
    /* opacity: 0; */

    height: 100%;
    background-color: #ECF8F5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: montserrat;
    font-size: 0.8vw;
    border-radius: 0.8vw;

}

.space {
    width: 1.5%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 0.9vw;
    /* opacity: 0; */
}

.impact {
    width: 25%;
    height: 100%;
    background-color: #ECF8F5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8vw;
    color: #00A084;
    font-family: montserrat;
    font-size: 0.8vw;

}

.about h3 {
    font-weight: 500;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

}

.impact h3 {
    font-weight: 500;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

.impact span {
    font-weight: 500;
    opacity: 0;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;


}

.platform h3 {
    font-weight: 500;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

}

.platform span {
    font-weight: 500;
    opacity: 0;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;


}

.about span {
    font-weight: 500;
    opacity: 0;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;


}

.platform {
    width: 25%;
    height: 100%;
    background-color: #ECF8F5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8vw;
    color: #00A084;
    font-size: 0.8vw;

    font-family: montserrat;

}

.about {
    width: 25%;
    height: 100%;
    background-color: #ECF8F5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8vw;
    color: #00A084;
    font-family: montserrat;
    font-size: 0.8vw;




}

.logo {
    width: 25%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8vw;
    font-family: montserrat;
    gap: 0.5vw;

}

.logo h3 {
    font-size: 1vw;
    font-weight: 650;
    color: rgb(19, 19, 19);
}

.logo span {
    font-size: 1vw;
    font-weight: 450;
    color: rgb(85, 85, 85);
}

.lg {
    width: 2.3vw;
    height: 2.3vw;
    background-color: #055550;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lg i {
    color: #fff;
    font-size: 1.4vw;
    font-weight: 400;
}

.platform:hover {
    color: rgb(33, 33, 33);
    background-color: #FBFFFD;



}

.right:hover {
    color: rgb(242, 242, 242);
    background-color: #181818;


}

.platform:hover span {
    opacity: 1;
    color: #00A084;


}

.impact:hover {
    color: rgb(33, 33, 33);
    background-color: #FBFFFD;

}

.impact:hover span {
    opacity: 1;
    color: #00A084;


}

.about:hover {
    color: rgb(33, 33, 33);
    background-color: #FBFFFD;


}

.about:hover span {
    opacity: 1;
    color: #00A084;


}

#page1 {
    width: 70.2%;
    height: 70vh;
    background-color: #FBFFFD;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    border-radius: 0.8vw;
    gap: 1vw;
    margin-left: calc(1.5% + 2px);

    z-index: 50;

}

.side {
    width: 1.5%;
    height: 100%;
    position: absolute;
    top: 8.2vh;
    border-radius: 0.9vw;
    background-color: #FBFFFD;
}

.p1txt {
    width: 18vw;
    height: 3vh;
    background-color: #EDF5FC;
    border: 1px solid #0067cd9d;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1vw;
    font-family: montserrat;
    font-size: 1vw;
    color: #00A084;
    margin-bottom: 3vw;
}

.p1txt h4 {
    font-weight: 500;
}

#page1 span {
    font-family: exp;
    font-size: 11vw;
    font-weight: 700;
    color: #00A084;
}

#page1 h1 {
    font-family: montserrat;
    font-size: 6vw;
    line-height: 5vw;
}

#page1 #para {
    font-family: montserrat;
    font-size: 1.3vw;
    width: 80%;
    font-weight: 400;
    color: #a5a5a5;
    text-align: center;
    margin-top: 0.5vw;
}

.btn {
    width: 13vw;
    height: 7vh;
    border-radius: 1vw;
    background-color: #e4f7f4e6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5vw;
    color: #00A084;
    font-size: 1.2vw;
    font-family: montserrat;
    border: 1px solid rgb(25, 25, 25);
    transition: all ease 0.3s;
    cursor: crosshair;
    margin-top: 2vw;
}

.btn:hover {
    background-color: rgb(43, 43, 43);
    color: #fff;
}

.banner {
    width: calc(27.9% - 2px);
    height: 78vh;
    background-color: #FBFFFD;
    position: absolute;
    top: 0%;
    right: 0%;
    padding: 0.2vw;
    border-radius: 0.6vw;
    opacity: 0;

}

.banner-cover {
    width: 100%;
    height: 100%;
    background-image: url(./assets/Gemini_Generated_Image_gt9752gt9752gt97.png);
    background-size: cover;
    background-position: center;
    border-radius: 0.5vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1vw;
    font-family: montserrat;
    font-size: 0.75vw;
    color: #e6e6e6;
}

.banner-cover h1 {
    font-weight: 500;
}
.banner-cover h5 {
    font-weight: 550;
   font-size: 1vw ;
   color: #a5a5a5;
   margin-bottom: 0.3vw;
}

#page2 {
    width: 98%;
    height: 220vh;
    background-color: #FBFFFD;

    opacity: 0;
    border-radius: 0.8vw;
    gap: 1vw;
    margin-left: calc(1.5% + 2px);

    margin-top: 0.4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8vw 0vw 0vw 0vw;
    gap: 10vw;

}

.p2-up {
    width: 80%;
    height: 25vh;
    background-color: #E0E5EB;
    border-radius: 2vw;
    padding: 0vw 3vw 0vw 3vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border: 1px solid #E0E5EB;
    /* align-items: center; */
    /* justify-content: center; */
}

.p2-up h1 {
    font-family: montserrat;
    font-size: 2.5vw;
    /* font-weight: 600; */
    color: rgb(14, 14, 14);
    margin-bottom: 0.5vw;
}

.p2-up h4 {
    font-family: montserrat;
    font-size: 0.9vw;
    font-weight: 600;
    color: rgb(167, 167, 167);
    margin-bottom: 0.5vw;
}

.frst {
    background-color: #f8fffe;
    height: 100%;
    grid-column: 1/2;
    border-right: 1px solid #E0E5EB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.scnd {
    background-color: #f8fffe;
    height: 100%;
    grid-column: 2/3;
    border-right: 1px solid #E0E5EB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;



}

.thrd {
    background-color: #f8fffe;
    height: 100%;
    grid-column: 3/4;
    border-right: 1px solid #E0E5EB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;



}

.frth {
    background-color: #f8fffe;
    height: 100%;
    grid-column: 4;
    border-right: 1px solid #E0E5EB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;



}

.p2-mid {
    width: 90%;
    height: 100vh;
    /* background-color: #d6391e; */
}

.midhead {
    width: 100%;
    height: 18vh;
    /* background-color: #ffffff; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1vw 0vw 0vw 0vw;
    font-family: montserrat;
    gap: 1vw;
}

.midhead h5 {
    font-size: 0.8vw;
    color: #00A084;
    letter-spacing: 0.5px;
    font-weight: 650;
}

.midhead h3 {
    font-size: 3.5vw;
    color: #080808;
    width: 80%;
    font-weight: 650;
    line-height: 3.1vw;
}

.card {
    width: 100%;
    height: 72vh;
    /* background-color: yellowgreen; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3vw;
    margin-top: 5vh;
    font-family: montserrat;
}

.c {
    background-color: #faffff;
    border-radius: 1.7vw;
    padding: 2vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1vw;
    border: 0.7px solid rgba(205, 205, 205, 0.545);
}

.c h2 {
    font-weight: 700;
    font-family: montserrat;
    font-size: 1.3vw;
}

.c h4 {
    font-weight: 500;
    font-family: montserrat;
    font-size: 0.9vw;
    color: #a5a5a5;
}

.clogo {
    width: 4vw;
    height: 4vw;
    background-color: #FFF1F2;
    border-radius: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;

}

.clogo i {
    font-size: 1.8vw;
}

.sos i {
    color: #E7000B;
}

.bbr i {
    color: #E7000B;
}

.ir i {
    color: #155DFC;
}

.hp i {
    color: #009966;
}

.an i {
    color: #E17100;
}

.ais i {
    color: #ffffff;
}

.ir .clogo {
    background-color: #EFF6FF;
}

.hp .clogo {
    background-color: #ECFDF5;
}

.an .clogo {
    background-color: #FFFBEB;
}

.ais .clogo {
    background-color: #07121E;
}

.c:hover {
    box-shadow: -7px 14px 30px rgba(0, 0, 0, 0.247);
}

.p2-down {
    width: 100%;
    height: 60vh;
    /* background-color: rgba(255, 0, 0, 0.267); */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 2.5vw;
    margin-top: -4.5vw;
    position: relative;
    padding: 2vw;

}

.p2-down h1 {
    font-family: montserrat;
    font-size: 4vw;
    font-weight: 650;
}

.p2-down span {
    color: #009966;
    font-family: exp;
    font-size: 6.5vw;
}

.p2-down h4 {
    font-family: montserrat;
    font-size: 1.3vw;
    color: #a5a5a5;
    font-weight: 600;
    width: 60%;
    text-align: center;
    text-align: center;
}

.p2-btn {
    width: 10vw;
    /* opacity: 0; */
    position: absolute;
    height: 7vh;
    background-color: #1d1d1d;
    color: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: montserrat;
    font-size: 0.8vw;
    border-radius: 1vw;
    bottom: 15%;
    left: 50%;
    transform: translate(-50%, 0%);
    cursor: pointer;
}

.p2-btn:hover {
    background-color: #ecf2f8;
    color: #0f0f0f;
    border: 1px solid rgb(48, 48, 48);
}

.sign {
    width: 98%;
    height: 20vh;
    background-color: #FBFFFD;
    border-radius: 0.8vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: calc(1.5% + 2px);
    padding: 0vw 1.4vw;
    margin-top: 0.4vw;
    font-family: montserrat;
    opacity: 0;
}

.sign h5 {
    font-size: 0.8vw;
    color: #c3c1c1;
    font-weight: 650;

}

.signaturebox {
    width: 20vw;
    height: 100%;
    font-family: montserrat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.signaturebox h5 {
    font-size: 1.1vw;
    color: #c3c1c1;
    font-weight: 700;
    text-align: center;
}

.signature {
    width: 7vw;
    height: 5vh;
    background-image: url(./assets/sign.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%, 0%);

}

@media (max-width: 510px) {
    .space {
        display: none;
    }

    #main {
        height: 442vh;
    }

    

    #nav {
        width: 100%;
        justify-content: space-between;
        /* background-color: red; */

    }

    .impact {
        display: none;

    }

    .platform {
        display: none;

    }

    .about {
        display: none;

    }

    .left {
        width: 40%;
        height: 100%;
        /* opacity: 0; */
        display: flex;
        gap: 3px;
        background-color:  #FBFFFD;
        align-items: center;
        border-radius: 2.8vw;
    }

    .middle {
        width: 20%;
        height: 100%;
        /* opacity: 0; */
        border-radius: 2.8vw;

        background-color: #FBFFFD;

    }

    .right {

        width: 40%;
        /* opacity: 0; */

        height: 100%;
        background-color: #ECF8F5;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: montserrat;
        font-size: 3vw;
        border-radius: 2.8vw;

    }

    .logo {
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2.8vw;
        font-family: montserrat;
        gap: 0.5vw;

    }

    .logo h3 {
        font-size: 4vw;
        font-weight: 650;
        color: rgb(19, 19, 19);
    }

    .logo span {
        font-size: 4vw;
        font-weight: 450;
        color: rgb(85, 85, 85);
    }

    .lg {
        width: 7.3vw;
        height: 7.3vw;
        background-color: #055550;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lg i {
        color: #fff;
        font-size: 3.4vw;
        font-weight: 400;
    }

    .side {
        display: none;
    }

    #page1 {
        width: 100%;
        height: 140vh;
        background-color: #FBFFFD;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        opacity: 0;
        border-radius: 2.8vw;
        gap: 3vw;
        margin-left: 0vw;
        padding: 20vw 0vw;
        z-index: 50;

    }

    .p1txt {
        width: 45vw;
        height: 4vh;
        background-color: #EDF5FC;
        border: 1px solid #0067cd9d;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2vw;
        font-family: montserrat;
        font-size: 2.8vw;
        color: #00A084;
        margin-bottom: 6vw;
    }

    .p1txt h4 {
        font-weight: 600;
    }

    #page1 span {
        font-family: exp;
        font-size: 18.4vw;
        font-weight: 700;
        color: #00A084;
    }

    #page1 h1 {
        font-family: montserrat;
        font-size: 12.5vw;
        line-height: 11vw;
        width: 60%;
        text-align: center;
    }

    #page1 #para {
        font-family: montserrat;
        font-size: 4.3vw;
        width: 80%;
        font-weight: 550;
        color: #a5a5a5;
        text-align: center;
        margin-top: 3.5vw;
    }

    .btn {
        width: 35vw;
        height: 6vh;
        border-radius: 1vw;
        background-color: #e4f7f4e6;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.5vw;
        color: #00A084;
        font-size: 3.2vw;
        font-family: montserrat;
        border: 1px solid rgb(25, 25, 25);
        transition: all ease 0.3s;
        cursor: crosshair;
        margin-top: 14vw;
    }


    #page2 {
        width: 100%;
        height: 279vh;
        background-color: #FBFFFD;

        opacity: 0;
        border-radius: 2.8vw;
        gap: 1vw;
        margin-left: 0vw;

        margin-top: 0.4vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8vw 0vw 0vw 0vw;
        gap: 10vw;

    }

    .p2-up {
        width: 93%;
        height: 10vh;
        background-color: #E0E5EB;
        border-radius: 2vw;
        padding: 0vw 3vw 0vw 3vw;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        border: 1px solid #E0E5EB;
        /* align-items: center; */
        /* justify-content: center; */
    }

    .p2-up h1 {
        font-family: montserrat;
        font-size: 4.5vw;
        /* font-weight: 600; */
        color: rgb(14, 14, 14);
        margin-bottom: 0.5vw;
    }

    .p2-up h4 {
        font-family: montserrat;
        font-size: 1.9vw;
        font-weight: 600;
        color: rgb(167, 167, 167);
        margin-bottom: 0.5vw;
    }

    .frst {
        background-color: #f8fffe;
        height: 100%;
        grid-column: 1/2;
        border-right: 1px solid #E0E5EB;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .scnd {
        background-color: #f8fffe;
        height: 100%;
        grid-column: 2/3;
        border-right: 1px solid #E0E5EB;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;



    }

    .thrd {
        background-color: #f8fffe;
        height: 100%;
        grid-column: 3/4;
        border-right: 1px solid #E0E5EB;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;



    }

    .frth {
        background-color: #f8fffe;
        height: 100%;
        grid-column: 4;
        border-right: 1px solid #E0E5EB;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;



    }

    .p2-mid {
        width: 90%;
        height: 180vh;
        /* background-color: #d6391e; */
    }

    .midhead {
        width: 100%;
        height: 20vh;
        /* background-color: #ffffff; */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 1vw 0vw 0vw 0vw;
        font-family: montserrat;
        gap: 3vw;
    }

    .midhead h5 {
        font-size: 2.8vw;
        color: #00A084;
        letter-spacing: 0.5px;
        font-weight: 650;
    }

    .midhead h3 {
        font-size: 10.5vw;
        color: #080808;
        width: 90%;
        font-weight: 650;
        line-height: 9vw;
    }

    .card {
        width: 100%;
        height: 152vh;
        /* background-color: yellowgreen; */
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 3vw;
        margin-top: 5vh;
        font-family: montserrat;
    }

    .c {
        background-color: #faffff00;
        border-radius: 1.7vw;
        padding: 8vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1vw;
        border: 0.7px solid rgba(205, 205, 205, 0.545);
    }

    .c h2 {
        font-weight: 700;
        font-family: montserrat;
        font-size: 5.3vw;
    }

    .c h4 {
        font-weight: 500;
        font-family: montserrat;
        font-size: 2.9vw;
        color: #a5a5a5;
    }

    .clogo {
        width: 10vw;
        height: 10vw;
        background-color: #FFF1F2;
        border-radius: 2vw;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .clogo i {
        font-size: 4vw;
    }

    .sos i {
        color: #E7000B;
    }

    .bbr i {
        color: #E7000B;
    }

    .ir i {
        color: #155DFC;
    }

    .hp i {
        color: #009966;
    }

    .an i {
        color: #E17100;
    }

    .ais i {
        color: #ffffff;
    }

    .ir .clogo {
        background-color: #EFF6FF;
    }

    .hp .clogo {
        background-color: #ECFDF5;
    }

    .an .clogo {
        background-color: #FFFBEB;
    }

    .ais .clogo {
        background-color: #07121E;
    }

    .c:hover {
        box-shadow: -7px 14px 30px rgba(0, 0, 0, 0.247);
    }

    .p2-down {
        width: 100%;
        height: 70vh;
        /* background-color: rgba(255, 0, 0, 0.267); */
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        gap: 2vw;
        margin-top: 1vw;
        position: relative;
        padding: 2vw;

    }

    .p2-down h1 {
        font-family: montserrat;
        font-size: 12.5vw;
        font-weight: 650;
        text-align: center;
        line-height: 12vw;
        width: 70%;
    }

    .p2-down span {
        color: #009966;
        font-family: exp;
        font-size: 18.4vw;
    }

    .p2-down h4 {
        font-family: montserrat;
        font-size: 4vw;
        color: #a5a5a5;
        font-weight: 500;
        width: 90%;
        text-align: center;
        text-align: center;
        margin-top: 9vw;
    }

    .p2-btn {
        width: 35vw;
        /* opacity: 0; */
        position: absolute;
        height: 6vh;
        background-color: #1d1d1d;
        color: #fafbfc;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: montserrat;
        font-size: 2.8vw;
        border-radius: 1vw;
        bottom: 15%;
        left: 50%;
        transform: translate(-50%, 0%);
        cursor: pointer;
    }

    .sign {
        width: 100%;
        height: 15vh;
        background-color: #FBFFFD;
        border-radius: 2.8vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 0vw;
        padding: 0vw 1.4vw;
        margin-top: 0.4vw;
        font-family: montserrat;
    }

    .sign h5 {
        font-size: 1.5vw;
        color: #c3c1c1;
        font-weight: 650;

    }

    .signaturebox {
        width: 40vw;
        height: 100%;
        font-family: montserrat;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .signaturebox h5 {
        font-size: 1.7vw;
        color: #c3c1c1;
        font-weight: 700;
        text-align: center;
    }

    .signature {
        width: 20vw;
        height: 5vh;
        background-image: url(./assets/sign.png);
        background-size: cover;
        background-position: center;
        position: absolute;
        bottom: 6%;
        left: 50%;
        transform: translate(-50%, 0%);

    }

    .ld-up-txt {
        width: 63vw;
        height: 5vh;
        font-size: 3.6vw;

    }

    .ld-up-txt h3 {
        font-weight: 430;
        text-align: center;
    }
    .ld-dw-txt {
    width: 63vw;
    height: 5vh;
  
    font-size: 3.7vw;
 
}

.ld-dw-txt h3 {
    font-weight: 430;
        text-align: center;

}

    #load {
        width: 65vw;
        height: 25vh;
        background-color: #00A084;
        border-radius: 1vw;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 5;
        transform: translate(-50%, -50%);
        rotate: 0deg;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        opacity: 1;
        pointer-events: none;
    }

    #load-white {
        width: 1vw;
        height: 1vh;
        background-color: #ffffff;
        position: absolute;
        z-index: 7;
        top: 50%;
        left: 50%;
        display: none;
        transform: translate(-50%, -50%);
        opacity: 1;
        pointer-events: none;

    }
    .txt {
    width: fit-content;
    height: fit-content;
    font-family: gilroy;
    font-size: 5.5vw;
    color: #fff;
    position: absolute;


}
.banner {
    width: 80vw;
    height: 50vh;
    background-color: #FBFFFD;
    position: absolute;
    top: 90vh;
    right: 50%;
    padding: 0.2vw;
    border-radius: 6.6vw;
    opacity: 0;
    transform: translate(50%,0%);
    overflow: hidden;

}

.banner-cover {
    width: 100%;
    height: 100%;
    background-image: url(./assets/Gemini_Generated_Image_gt9752gt9752gt97.png);
    background-size: cover;
    background-position: center;
    border-radius: 0.5vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 5vw;
    font-family: montserrat;
    font-size: 2.75vw;
    color: #e6e6e6;
}

.banner-cover h1 {
    font-weight: 650;
    width: 80%;
}
.banner-cover h5 {
    font-weight: 550;
   font-size: 3vw ;
   color: #a5a5a5;
   margin-bottom: 2vw;
}

}