body{
    background-color:#E8E2E2;
    }
    .nav-item {
    align-self: flex-start;
    }
    #price1 {
   padding:3px;
     color: green;
       background-color:#E8E2E2;
   font-size: 12px;
       border-radius: 10px;
    }
        #price2 {
   font-size: 12px;
     color: green;
       background-color:#E8E2E2;
   padding:3px;
       border-radius: 10px;
    }
    .contact {
    display: flex;
    justify-content: flex-start;
    }
    .nameNav{
    display: flex;
    justify-content: flex-start;
    color: #E8E2E2;
    font-weight: 500;
    font-size: 15px;
    }
    .social{
    margin: 10px;
    }
    .nav-link{
    color: #E8E2E2;
    align-self: flex-start;
    }
    #logosNav{
    max-width: 100%;
    }
    .dropdown-itemNav {
    color: #E8E2E2;
    }
    .rules{
    background: rgb(6,0,71,0.5);
    background: linear-gradient(90deg, rgba(6,0,71,1) 30%, rgba(179,0,94,1) 80%, rgba(179,0,94,1) 90%);
    color: #E8E2E2;
    font-size: 12px;
    border: none;
    margin: 0%;
    }
    .textNavBank{
    color: #E8E2E2;
    font-size: 12px;
    }
    .page1 {
    display: flex;
    flex-direction: column;
    font-family: 'Rubik', sans-serif;
    background-image: url("mobi.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height:100vh;
    background-position:center ;
    }
    .play {
    width: 37px;
    height: 37px;
    background-image: url('play-button\ \(2\).png');
    background-size: contain;
    border-radius: 10px;
    border: none;
    opacity: 70%;
    }
    .pause {
    width: 37px;
    height: 37px;
    background-image: url('play-button\ \(2\).png');
    background-size: contain;
    border-radius: 10px;
    border: none;
    opacity: 70%;
    }
    .back{
    background-color: #E8E2E2;
    }
    .dropdown-item {
    color: #E8E2E2;
    }
    #heading {
    font-size: 33px;
    text-align: center;
    font-family: 'Mulish', sans-serif;
    color: white;
    }
    .titele{
    color: #B3005E;
    }
    .group{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: inherit;
    }
    .fonBox1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .textBox {
    margin-top: 20px;
    text-align: center;
    color: white;
    background-color: rgb(179,0,94, 0.5);
    align-self: center;
    width: fit-content;
    font-size: 19px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 100px;
    }
    .effects {
    font-size: 19px;
    align-self: center;
    font-family: 'Mulish', sans-serif;
    }
    .effects2 {
    text-align: end;
    padding: 5px 12px;
    margin: 0px 16px 0px 0px;
    font-size: 15px;
    color: white;
    border-radius: 7px;
    }
    #headingNote {
    text-align: end;
    padding: 5px 12px;
    margin: 0px 16px 0px 0px;
    font-size: 15px;
    color: #060047;
    background-color: rgb(255,255,255, 0.5);
    font-weight: bolder;
    border-radius: 7px;
    }
    .note{
    font-size: 18px;
    }
    .textColor {
    font-family: 'Philosopher', sans-serif;
    }
    .page2 {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-evenly;
    }
    .card{
    align-self: center;
    background: rgb(6,0,71);
    background: linear-gradient(90deg, rgba(6,0,71,1,0.6) 40%, rgba(179,0,94,1,0.6) 70%, rgba(179,0,94,1,0.6) 90%);
    color: #E8E2E2;
    text-align: center;
    font-family: 'Rubik', sans-serif;
    }
    .page3 {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: rgb(6,0,71);
    background: linear-gradient(90deg, rgba(6,0,71,1) 40%, rgba(179,0,94,1) 70%, rgba(179,0,94,1) 90%);
    color: #E8E2E2;
    justify-content: center;
    }
    .list{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height:75%;
    padding: 0%;
    }
    .listElements {
    text-align: center;
    list-style: none;
    font-family: 'Rubik', sans-serif;
    }
    .headingPage3{
    text-align: center;
    padding: 10px;
    }
    .btn{
    align-items: center;
    }
    .page5 {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #E8E2E2;
    justify-content: space-evenly;
    }
    #video {
    max-width: max-content;
    align-self: center;
    height:200px;
    }
    .headingPage5 {
    text-align: center;
    }
    .textPage5{
    text-align: center;
    }
    #picturePage5{
    width: 150px;
    align-self: center;
    }
    .boxPage5{
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .headingPage4{
    text-align: center;
    padding: 5px;
    }
    #picturePage4{
    width: 45px;
    height: 45px;
    padding: 3px;
    align-self: center;
    }
    .textPage4{
    font-size: 16px;
    font-family: 'Rubik', sans-serif;
    max-width: fit-content;
    }
    .notesPage4{
    font-size: 14px;
    font-family: 'Rubik', sans-serif;
    text-align: center;
    align-self: center;
    padding: 5px;
    margin: 5px;
    width: 100%;
    }
    #btnStylePage4{
    background-color:rgb(232,226,226,0.5);
    font-weight: 600;
    color: black;
    }
    .headingPage6{
    text-align: center;
    padding: 20px;
    color: #E8E2E2;
    background: rgb(6,0,71);
    background: linear-gradient(90deg, rgba(6,0,71,1) 30%, rgba(179,0,94,1) 80%, rgba(179,0,94,1) 90%);
    }
    .beforeAfter{
    text-align: center;
    padding: 20px;
    color: #E8E2E2;
    background: rgb(6,0,71);
    background: linear-gradient(90deg, rgba(6,0,71,1) 30%, rgba(179,0,94,1) 80%, rgba(179,0,94,1) 90%);
    }
    .page4 {
    display: flex;
    flex-direction: column;
    background: rgb(6,0,71);
    background: linear-gradient(90deg, rgba(6,0,71,1) 30%, rgba(179,0,94,1) 80%, rgba(179,0,94,1) 90%);
    justify-content:space-evenly;
    color: #E8E2E2;
    }
    .boxColumnPage4{
    display: flex;
    flex-direction: column;
    }
    #dropdownItemPage4{
    background-color:#E8E2E2;
    color:rgb(6,0,71);
    }
    .dropdown-item {
    color:rgb(6,0,71);
    }
    .page8 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    }
    .headingPage8{
    text-align: center;
    margin-top: 15px;
    }
    .textPage8{
    color:#E8E2E2;
    background: rgb(6,0,71);
    background: linear-gradient(90deg, rgba(6,0,71,1) 30%, rgba(179,0,94,1) 80%, rgba(179,0,94,1) 90%);
    font-size: 14px;
    }
    .ulPage8{
    background: rgb(6,0,71);
    padding: 10px;
    margin: 5px;
    color: #E8E2E2;
    }
    #carouselExampleCaptions{
    align-self: center;
    width:50vh;
    }
    #picturePage8{
    width: 30px;
    height: 30px;
    align-self: center;
    }
    .page7 {
    display: flex;
    flex-direction: column;
    background: rgb(6,0,71);
    background: linear-gradient(90deg, rgba(6,0,71,1) 30%, rgba(179,0,94,1) 80%, rgba(179,0,94,1) 90%);
    color: #E8E2E2;
    justify-content: space-evenly;
    }
    .headingPage7{
    text-align: center;
    margin-top: 15px;
    }
    .textPage7{
    text-align: center;
    align-self: center;
    }
    .videoPage7{
    display: flex;
    justify-content: space-evenly;
    }
    #video7 {
    max-width:230px;
    align-self: center;
    padding: 15px;
    }
    #picturePage7{
    width: 35px;
    height: 35px;
    padding: 3px;
    align-self: center;
    }
    .chal {
    text-decoration: solid;
    font-size: 18px;
    }
    .page6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .headingPage6{
    text-align: center;
    padding: 20px;
    color: #E8E2E2;
    background: rgb(6,0,71);
    background: linear-gradient(90deg, rgba(6,0,71,1) 30%, rgba(179,0,94,1) 80%, rgba(179,0,94,1) 90%);
    }
    #carouselExampleAutoplaying{
    align-self: center;
    width:50vh;
    }
    footer{
    color:#E8E2E2;
    background: rgb(6,0,71);
    background: linear-gradient(90deg, rgba(6,0,71,1) 30%, rgba(179,0,94,1) 80%, rgba(179,0,94,1) 90%);
    }
    #price {
        font-size:5px;
        color:white;
    }

    #footerText{
    color:#E8E2E2;
    }
    #logos{
    max-width: 50%;
    }
    @media all and  (max-width:800px) {
    #video7 {
    max-width:130px;
    align-self: center;
    }
        #price {
    font-size: 14px;
     color: green;
       background-color:#E8E2E2;
       padding: 3px;
       border-radius: 10px;
    }
    #carouselExampleAutoplaying{
    width: 40vh;
    }
    #carouselExampleCaptions{
    width: 40vh;
    }
    #logos{
    max-width: 75%;
    }}