@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Merriweather:ital,wght@1,700&family=Open+Sans:ital,wght@1,600&family=Poppins&family=Roboto&family=Rubik:ital@1&family=Yantramanav:wght@300;400&display=swap');

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

.grid-container {
    display: grid;
    grid-template-columns: 40vw 60vw;
    background-color: white;
    /*animation: bgc 3.5s infinite;*/
}

.grid-item {
    background-color: white;
    text-align: center;
    font-size: 30px;
}

.button {
    grid-column: 1/1;
    height: 80px;
    width: 80px;
}

.item3 {
    grid-column: 1 / 1;
    text-align: left;
    margin-left: 15vw;
    margin-top: -140vh;
    /*animation: bgc 5s infinite;*/

}

.item2{
    background-color: rgb(214, 24, 71);
    grid-column: 2 /  2;
    width: 68%;
    margin-left: 25%;
    /*grid-row: 1 / span 3;*/
    /*animation: bgc 8s infinite;*/
}

.aop {
    color: black;
    text-decoration: none;
}
.aop:hover {
    color: red;
}

.phone {
    position: relative;
    width: 50%;
    /* margin-top: 20%;*/
    /*margin-bottom: 20%;*/
    margin: 10vw;
}

.vid {
    width: 28vw;
    height: 34vh;
    margin-top: -4.5vh;
    /*transform: translate(-0%, 0%);*/

}


p{
    font-family:'Roboto', sans-serif;
    font-size: 60%;
    /*animation: rotate 1s infinite;*/
}

h2{
    font-family:'Roboto', sans-serif;
    /*animation: rotateTwo 1.5s infinite;*/
}

.lor{
    margin-top: 10%;
    font-size: 60%;
}

.logo{
    width: 7%;
}

/*--------------------------------*/
@keyframes bgc {
    0% {background-color: red}
    20% {background-color: blue}
    40% {background-color: blueviolet}
    60% {background-color: lawngreen}
    80% {background-color: yellow}
    100% {background-color: orangered}
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    } to {
          transform: rotate(360deg);
      }
}

@keyframes rotateTwo {
    from {
        transform: rotate(0deg);
    } to {
          transform: rotate(-360deg);
      }
}

@keyframes rotatePhone {
    from {
        transform: rotate(0deg);
    } to {
          transform: rotate(90deg);

      }

}

.vid {
    position: relative;
    top: -460px;
    opacity: 0;
    pointer-events: none;
    transition: pointer-events 0.1s ease;
}
.show {
    opacity: 1;
    transition: opacity 3.8s ease;
    pointer-events: auto;
}


.animate {
    animation: bgc 0.8s infinite;
}
.animateTwo {
    animation: bgc 0.5s infinite;
}
.animateThree {
    animation: bgc 1.2s infinite;
}
.rotate {
    animation: rotate 1.5s infinite;
}
.rotateTwo {
    animation: rotateTwo 1s infinite;
}

.rotatePhone {
    transform: rotate(-90deg);
    transition: 1s;
}