@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

/* *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */
body {
    background:#000;
    /* font-family: 'Arial', sans-serif; */
}
h1 {
    text-align: center;
    margin-top: 20px;
    font-size: 3em;
}

.dropdown {
    text-align: center;
    font-weight: bolder;
}
.dropdown-menu {
    background-color: #0ccf64; /* Light blue */
    border: 1px solid #4682b4; /* Steel blue */

}
/* .dropdown-item {
    font-size: 25px;
} */
.dropdown-item:hover {
    background-color: #4682b4; /* Steel blue */
    color: #fff;

}

.flex_div{
    display: flex;
    flex-direction: row;
    gap: 2%;
    justify-content: center;
}
.flex_div  h1{
    display: inline-block;
    position: relative;
    animation: rise 0.5s ease-in-out forwards;
    color:white;
}
@keyframes rise {
    0% {
        top: 10px;
        opacity: 0;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}


.div_buttons{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.div_buttons button{
    border-radius: 10px;
    /* background: #01301C; */
    background: white;
    border:3px solid black;
    /* color: #30ff07; */
    /* height: 15vh; */
    width:15vh;
    font-weight: bolder;
    font-size: 35px;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(190, 190, 190),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
}

.div_buttons button:active{
    border: 3px solid #30ff07;
    /* background: #2bff0050; */


}

.div_buttons2{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.div_buttons2 button:active{
    border: 3px solid #30ff07;
    /* background: #2bff0050; */

}
.div_buttons2 button{
    border-radius: 10px;
    background :white;
    border: 3px solid black;
    /* color: #30ff07; */
    /* height: 10vh; */
    width:15vh;
    font-weight: bolder;
    font-size: 35px;
    margin-top: 5px;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
    
}
i{
    /* color: #30ff07; */
    color:black;
}
.Reset_div{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.Reset_div button{
    border-radius: 10px;
    background: white;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
    border: 3px solid black;
    /* color: #30ff07; */
    color: #000;
    height: auto;
    width:auto;
    padding: 8px;
    font-weight: bolder;
    font-size: 20px;
    margin-bottom: 1%;
}
.Reset_div button:active{
    border: 3px solid #30ff07;
    /* background: #2bff0050; */

}
h1{
    /* color: #30ff07; */
    color: white;
    animation: rise 0.2s ease-in forwards;
}


@keyframes rise {
    0% {
        top: 10px;
        opacity: 0.8;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}


.img_div {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.img_div img{
    border-radius: 20px;
    width: 90vw;
    height: 45vh;
    margin-top: 5px;
    border: 10px solid white;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(190, 190, 190),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
    /* padding: 5px; */
}

.lets-begin-button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 5px;
}
.lets-begin-button button{
    border-radius: 10px;
    /* background: #01301C; */
    background: white;
    border: 2px solid black;
    /* color: #30ff07; */
    color: #000;
    height: 10%;
    width:auto;
    font-weight: bolder;
    font-size: 20px;

}
.lets-begin-button button:active{
    border: 3px solid #30ff07;
    background: #2bff0050;
}
.lets_bigin-card{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 5px;
    /* margin: ; */
    /* padding: 5px; */
    gap: 2%;
    /* background :#f36e028e; */
    border-radius: 20px;
    /* border: 1px solid ; */
}

.imgone img{
    border-radius: 10px;

    /* border: 2px solid #01301C; */
width: 30vw;
    height: 30vh;
    margin-bottom: 5px;   
    border:10px solid black;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(190, 190, 190),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
    margin-top: 1%;
}


.startedone{
    margin-top: 1%;
    border-radius: 100px;
    /* background: #01301C; */
    background: white;
    /* color: #0ccf64; */
    color: #000;
    width: 30vw;
    
    /* display: flex; */
    /* flex-direction: row; */
    /* justify-content: center; */
    /* margin: auto; */
    /* font-weight: bolder; */
    font-size: 25px;
    border: none;
}
/* .imgtwo{
    display: flex;
    flex-direction: column;
    justify-content: center;
} */

.startedtwo{
    margin-top: 1%;
    border-radius: 10px;
    /* background: #01301C; */
    background: white;
    /* color: #0ccf64; */
    color: #000;
    /* font-weight: bolder; */
    font-size: 25px;
    border: none;
    width: 30vw;
    margin-top: 2px;

}
.imgtwo img{
    border-radius: 10px;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(190, 190, 190),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
    /* border:5px solid white; */

    /* border:10px solid white; */

    /* border: 2px solid #01301C; */
    border:10px solid black;

    width: 30vw;
    height: 30vh;
    margin-bottom: 5px;   

    margin-top: 1%;
}


.imgthree img{
    border-radius: 10px;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(190, 190, 190),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
    /* border:10px solid white; */
    /* border:5px solid white; */

    width: 30vw;
    height: 30vh;
    margin-bottom: 5px;   
    border:10px solid black;

    margin-top: 1%;

}


.imgone{
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.imgtwo{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.imgthree{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.imgthree button{
    margin-top: 1%;
    border-radius: 10px;
    background:white;
    color: #000;
    /* color: #0ccf64; */
    /* font-weight: bolder; */
    font-size: 25px;
    border: none;
    width: 30vw;
}
.startedthree{
    margin-top: 1%;
    border-radius: 10px;
    background: white;
    /* color: #0ccf64; */
    color: #000;
    /* font-weight: bolder; */
    font-size: 25px;
    border: none;
}
.start-card-one{
    border: 3px solid black;
    border-radius: 10px;
    /* margin-top: 20px; */
    background: white;
    width: 30vw;
margin: auto;
    text-align: center;
    font-weight: bolder;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}
.start-card-one button{
    margin-top: 1%;
    border-radius: 10px;
    background: white;
    /* width: 100%; */

    /* color: #0ccf64; */
    font-weight: bolder;
    font-size: 35px;
    border: 1px solid black;    

}

.start-card-one button:active{
    border: 1px solid white;    

}


.start-card-two{
    border: 3px solid black;
    border-radius: 10px;
    margin-top: 15px;
    background: white;
    width: 30vw;
    margin: auto;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(190, 190, 190),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
    text-align: center;
    font-weight: bolder;
}

.start-card-two button{
    margin-top: 1%;
    border-radius: 10px;
    background: white;
    /* color: #0ccf64; */
    font-weight: bolder;
    font-size: 35px;
    border: 1px solid black;
/* width: 100%; */
width: 20vw;

}

.start-card-two button:active{
    border: 1px solid white;    

}

.start-card-three{
    text-align: center;
    font-weight: bolder;
    border: 1px solid black;
    border-radius: 10px;
    background: white;
    margin-top: 20px;
    width: 30vw;
    margin: auto;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(190, 190, 190),
    0.3em 0.3em 1em rgba(0,0,0,0.3);

}
.allBg{
    /* background: #c411118a; */
    /* background-image: url('./Images/R.jpeg'); */
    /* background-size: cover; */
    /* background-repeat: no-repeat; */
    background: #0017eb;
    background-size: 100%;
}

.start-card-three button{
    margin-top: 1%;
    border-radius: 10px;
    background: white;
    /* color: #0ccf64; */
    font-weight: bolder;
    font-size: 35px;
    border: 1px solid black;    
    width: 20vw;
}
.startedthree{
    margin-top: 1%;
    border-radius: 10px;
    background: #01301C;
    color: #0ccf64;
    /* font-weight: bolder; */
    font-size: 25px;
    border: none;
}



.start-card-three button:active{
    border: 1px solid white;    

}


.new_div{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.new_div img{
    border-radius: 10px;
    border: 5px solid black;
    height: 30vh;
    width:80vw;
    margin-top: 5px;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}

.restartOne{
    font-weight: lighter;
    font-size: 20px;
}



hr.gradient {
    border: 2px solid white;
    height: 5px;
    background: black;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}



.beautiful-heading {
    font-family: 'Playfair Display', serif;
    font-size: 3em;
    /* color: #333; */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin: 0;
    /* padding: 15px; */
    background: linear-gradient(45deg, #5d9be2, #078bb3);
    color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}





.beautiful-heading1 {
    font-family: 'Playfair Display', serif;
    font-size: 3em;
    /* color: #333; */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin: 0;
    /* padding: 15px; */
    background: linear-gradient(45deg, #5d9be2, #078bb3);
    color: white;
    border-radius: 100px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}

.beautiful-heading:hover {
    transform: scale(1.05);
}